{"name":"label","type":"registry:component","title":"Label","description":"Renders an accessible label associated with controls.","categories":["ui","form","web-component"],"author":"Lloyd Richards <lloyd.d.richards@gmail.com>","dependencies":[],"files":[{"path":"registry/ui/label/label.stories.ts","type":"registry:ui","content":"import \"../checkbox/checkbox\";\nimport type { Meta, StoryObj } from \"@storybook/web-components-vite\";\nimport { html } from \"lit\";\n\ntype LabelArgs = Omit<HTMLLabelElement, \"children\"> & { children?: string };\n\nconst meta: Meta<LabelArgs> = {\n  title: \"ui/Label\",\n  component: \"label\",\n  tags: [\"autodocs\"],\n  argTypes: {\n    children: {\n      control: \"text\",\n      description: \"Label text content\",\n    },\n  },\n  args: {\n    children: \"Email\",\n  },\n  parameters: {\n    layout: \"centered\",\n  },\n  render: (args) => html` <label class=\"ui-label\"> ${args.children} </label> `,\n};\n\nexport default meta;\ntype Story = StoryObj<LabelArgs>;\n\nexport const Default: Story = {};\n\nexport const WithInput: Story = {\n  render: (args) => html`\n    <div class=\"grid w-full gap-3\">\n      <label class=\"ui-label\" for=\"email\">${args.children}</label>\n      <input id=\"email\" class=\"ui-input\" placeholder=\"Enter your email\" class=\"w-96\"></input>\n    </div>\n  `,\n};\n\nexport const WithRequiredIndicator: Story = {\n  render: (args) => html`\n    <div class=\"grid w-full gap-3\">\n      <label class=\"ui-label\" for=\"email\">\n        ${args.children} <span class=\"text-destructive\">*</span>\n      </label>\n      <input class=\"ui-input\" type=\"email\" required class=\"w-96\"></input>\n    </div>\n  `,\n};\n\nexport const CustomStyling: Story = {\n  render: (args) => html`\n    <label class=\"ui-label text-base font-semibold\"> ${args.children} </label>\n  `,\n  args: {\n    children: \"Important Field\",\n  },\n};\n\nexport const WithHelperText: Story = {\n  render: (args) => html`\n    <div class=\"grid w-full gap-3\">\n      <label class=\"ui-label\" for=\"email\">${args.children}</label>\n      <input id=\"email\" class=\"ui-input\" placeholder=\"Enter your email\" class=\"w-96\"></input>\n      <p class=\"text-sm text-muted-foreground\">We'll never share your email.</p>\n    </div>\n  `,\n};\n\nexport const PeerDisabled: Story = {\n  render: (args) => html`\n    <div class=\"flex items-center gap-2\">\n      <ui-checkbox id=\"checkbox\" class=\"peer\" disabled checked></ui-checkbox>\n      <label class=\"ui-label\" for=\"checkbox\">${args.children}</label>\n    </div>\n  `,\n  args: {\n    children: \"Disabled checkbox label\",\n  },\n};\n"}],"css":{"@utility ui-label":{"@apply text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70":{}}}}