{"name":"item","type":"registry:component","title":"Item","description":"A versatile item component using named slots for flexible content composition. Includes group and separator components for organizing lists.","categories":["ui","list","web-component"],"author":"Lloyd Richards ","registryDependencies":["@lit/button"],"dependencies":["lucide-static"],"files":[{"path":"registry/ui/item/item.ts","type":"registry:ui","content":"import { cva, type VariantProps } from \"class-variance-authority\";\nimport { adoptStyles, html, LitElement, nothing, unsafeCSS } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { TW, tailwind } from \"@/registry/lib/tailwindMixin\";\nimport { cn } from \"@/registry/lib/utils\";\nimport itemSlottedCss from \"./item.slotted.css?inline\";\n\n/**\n * Item component variants for styling the main container.\n */\nexport const itemVariants = cva(\n \"flex flex-col gap-4 transition-colors outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n {\n variants: {\n variant: {\n default: \"bg-background hover:bg-accent/50\",\n outline: \"border bg-card hover:bg-accent/50\",\n muted: \"bg-muted/50 hover:bg-muted text-muted-foreground\",\n },\n size: {\n default: \"p-4 rounded-lg\",\n sm: \"p-3 rounded-md text-sm\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n },\n);\n\ntype ItemVariants = VariantProps;\n\nexport interface ItemProperties {\n variant?: ItemVariants[\"variant\"];\n size?: ItemVariants[\"size\"];\n ariaLabel?: string | null;\n ariaDescribedby?: string | null;\n role?: string | null;\n}\n\n/**\n * A versatile item component using named slots for flexible content composition.\n *\n * @slot header - Optional header content above the main content area\n * @slot title - Title content (automatically styled via slotted CSS)\n * @slot description - Description content (automatically styled via slotted CSS)\n * @slot media - Optional icon/avatar/image area (positioned at the start)\n * @slot - Default slot for additional content\n * @slot actions - Optional action buttons/controls (positioned at the end)\n * @slot footer - Optional footer content below the main content area\n *\n * @example Basic usage with named slots\n * ```html\n * \n *
CN
\n *

Title

\n *

Description text

\n * Action\n * \n * ```\n *\n * @example With header and footer\n * ```html\n * \n *
\n *

Title

\n *

Description text

\n *
Footer text
\n * \n * ```\n */\nconst TwLitElement = TW(LitElement);\n\nconst itemSlottedStyles = unsafeCSS(itemSlottedCss);\n\n@customElement(\"ui-item\")\nexport class Item extends TwLitElement implements ItemProperties {\n static styles = itemSlottedStyles;\n\n @property({ type: String }) variant: ItemVariants[\"variant\"] = \"default\";\n @property({ type: String }) size: ItemVariants[\"size\"] = \"default\";\n\n @property({ type: String, attribute: \"aria-label\" }) accessor ariaLabel:\n | string\n | null = null;\n @property({ type: String, attribute: \"aria-describedby\" })\n accessor ariaDescribedby: string | null = null;\n @property({ type: String, attribute: \"role\" }) accessor role: string | null =\n null;\n\n override connectedCallback() {\n super.connectedCallback();\n if (this.shadowRoot) {\n adoptStyles(this.shadowRoot, [tailwind, itemSlottedStyles]);\n }\n }\n\n override render() {\n return html`\n \n \n
\n \n
\n \n \n \n
\n \n
\n \n \n `;\n }\n}\n\n/**\n * Group container for organizing multiple items with consistent spacing.\n *\n * @example\n * ```html\n * \n * Item 1\n * \n * Item 2\n * \n * ```\n */\n@customElement(\"ui-item-group\")\nexport class ItemGroup extends TW(LitElement) {\n override render() {\n return html`\n \n \n \n `;\n }\n}\n\n/**\n * Visual separator for dividing items within a group.\n *\n * @example\n * ```html\n * \n * Item 1\n * \n * Item 2\n * \n * ```\n */\n@customElement(\"ui-item-separator\")\nexport class ItemSeparator extends TW(LitElement) {\n override render() {\n return html`\n \n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"ui-item\": Item;\n \"ui-item-group\": ItemGroup;\n \"ui-item-separator\": ItemSeparator;\n }\n}\n"},{"path":"registry/ui/item/item.stories.ts","type":"registry:ui","content":"import \"./item\";\nimport \"../button/button\";\nimport type { Meta, StoryObj } from \"@storybook/web-components-vite\";\nimport { html } from \"lit\";\nimport { unsafeSVG } from \"lit/directives/unsafe-svg.js\";\nimport { BadgeCheck, ChevronRight, Plus, ShieldAlert } from \"lucide-static\";\n\n/**\n * A versatile item component using named slots for flexible content composition.\n *\n * ## Slots\n * - `header` - Optional header content above main content\n * - `title` - Title content (automatically styled)\n * - `description` - Description content (automatically styled)\n * - `media` - Optional icon/avatar/image area\n * - (default) - Additional content area\n * - `actions` - Optional action buttons/controls\n * - `footer` - Optional footer content below main content\n *\n * ## Related components\n * - `ui-item-group` - Container for grouping items\n * - `ui-item-separator` - Visual divider between items\n */\nconst meta: Meta = {\n title: \"ui/Item\",\n component: \"ui-item\",\n tags: [\"autodocs\"],\n parameters: {\n layout: \"centered\",\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj;\n\nexport const Default: Story = {\n render: () => html`\n \n \n

Basic Item

\n

\n A simple item with title and description using named slots.\n

\n Action\n \n\n \n
\n ${unsafeSVG(BadgeCheck)}\n
\n

Your profile has been verified.

\n
${unsafeSVG(ChevronRight)}
\n \n \n `,\n};\n\nexport const Outline: Story = {\n render: () => html`\n \n \n CN\n \n

Software Update Available

\n

Version 2.0 is now available for download.

\n Update\n \n `,\n};\n\nexport const Muted: Story = {\n render: () => html`\n \n \n ${unsafeSVG(BadgeCheck)}\n \n

Account Verified

\n

Your account has been successfully verified.

\n Dismiss\n \n `,\n};\n\nexport const Small: Story = {\n render: () => html`\n \n \n \n CN\n \n

New message from shadcn

\n

Hey, how are you doing?

\n \n \n \n
\n \n ML\n
\n \n

New message from maxleiter

\n

Check out this new feature!

\n \n \n `,\n};\n\nexport const WithIcon: Story = {\n render: () => html`\n \n \n ${unsafeSVG(ShieldAlert)}\n \n

Security Alert

\n

New login detected from unknown device.

\n Review\n \n `,\n};\n\nexport const WithAvatar: Story = {\n render: () => html`\n \n \n ER\n \n\n

Evil Rabbit

\n

Last seen 5 months ago

\n \n ${unsafeSVG(Plus)}\n \n \n `,\n};\n\nexport const WithGroup: Story = {\n render: () => {\n const people = [\n { username: \"shadcn\", email: \"shadcn@vercel.com\" },\n { username: \"maxleiter\", email: \"maxleiter@vercel.com\" },\n { username: \"evilrabbit\", email: \"evilrabbit@vercel.com\" },\n ];\n\n return html`\n \n ${people.map(\n (person, index) => html`\n \n \n ${person.username.charAt(0).toUpperCase()}\n \n

${person.username}

\n

${person.email}

\n \n ${unsafeSVG(Plus)}\n \n \n ${\n index !== people.length - 1\n ? html``\n : \"\"\n }\n `,\n )}\n \n `;\n },\n};\n\nexport const WithHeader: Story = {\n render: () => {\n const models = [\n {\n name: \"v0-1.5-sm\",\n description: \"Everyday tasks and UI generation.\",\n },\n {\n name: \"v0-1.5-lg\",\n description: \"Advanced thinking or reasoning.\",\n },\n {\n name: \"v0-2.0-mini\",\n description: \"Open Source model for everyone.\",\n },\n ];\n\n return html`\n \n ${models.map(\n (model) => html`\n \n \n

${model.name}

\n

${model.description}

\n \n `,\n )}\n \n `;\n },\n};\n\nexport const WithFooter: Story = {\n render: () => html`\n \n \n CN\n \n

Component Updated

\n

\n The item component has been refactored to use named slots.\n

\n
\n Last updated: 2 hours ago\n
\n \n `,\n};\n\nexport const CustomClasses: Story = {\n render: () => html`\n \n \n \n ${unsafeSVG(BadgeCheck)}\n \n

Custom Styled Item

\n

\n This item demonstrates how custom classes on slotted elements are merged\n with defaults.\n

\n View\n \n `,\n};\n\nexport const MixedApproach: Story = {\n render: () => html`\n \n \n \n \n Notification\n \n \n ${unsafeSVG(BadgeCheck)}\n \n

Verification Complete

\n

Your account has been verified successfully.

\n Dismiss\n
\n Just now\n
\n \n\n \n\n \n \n \n ${unsafeSVG(ShieldAlert)}\n \n

Security Alert

\n

New login from unrecognized device.

\n Review\n \n \n `,\n};\n\nexport const LayoutFlexibility: Story = {\n render: () => html`\n \n \n \n
\n \n CN\n
\n \n

Full Width Item

\n

\n This item uses className forwarding to apply max-w-2xl.\n

\n \n\n \n \n
\n \n ML\n
\n \n

Fixed Width Item

\n

This item has a fixed width of w-96.

\n \n \n `,\n};\n"},{"path":"registry/ui/item/item.slotted.css","type":"registry:ui","content":"@reference \"../../styles/tailwind.global.css\";\n\n@layer base {\n ::slotted([slot=\"header\"]) {\n @apply w-full;\n }\n\n ::slotted([slot=\"title\"]) {\n @apply font-medium leading-none m-0;\n }\n\n ::slotted([slot=\"description\"]) {\n @apply text-muted-foreground text-sm m-0;\n }\n\n ::slotted([slot=\"media\"]) {\n @apply flex shrink-0 items-center justify-center;\n }\n\n ::slotted([slot=\"actions\"]) {\n @apply flex shrink-0 items-center gap-2;\n }\n\n ::slotted([slot=\"footer\"]) {\n @apply w-full flex items-center;\n }\n}\n"}]}