{"version":3,"file":"separator.cjs","names":[],"sources":["../src/content/separator/separator.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\nimport { colorThemeMixin } from '../../styles';\nimport type { ThemeColor } from '../../types';\nimport componentStyles from './separator.css?inline';\n\n/** Separator component properties */\nexport type OreSeparatorProps = {\n  /** Theme color tint */\n  color?: ThemeColor;\n  /** Decorative only (default true) — set to false for semantic separators */\n  decorative?: boolean;\n  /** Optional label text centered on the separator */\n  label?: string;\n  /** Orientation of the separator */\n  orientation?: 'horizontal' | 'vertical';\n};\n\n/**\n * A simple visual divider between sections of content.\n *\n * @element ore-separator\n *\n * @attr {string} orientation - 'horizontal' (default) | 'vertical'\n * @attr {boolean} decorative - When true (default), aria-hidden is applied\n * @attr {string} label - Optional centered label text\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n *\n * @cssprop --separator-color - Line color\n * @cssprop --separator-size - Line thickness\n * @cssprop --separator-spacing - Vertical margin\n *\n * @part wrapper - Root wrapper container.\n * @part separator - Separator element.\n * @part label - Label element.\n * @example\n * ```html\n * <ore-separator></ore-separator>\n * <ore-separator label=\"or\"></ore-separator>\n * <ore-separator orientation=\"vertical\"></ore-separator>\n * ```\n */\nexport const SEPARATOR_TAG = 'ore-separator' as const;\ndefine<OreSeparatorProps>(SEPARATOR_TAG, {\n  props: {\n    color: prop.string<ThemeColor>(),\n    decorative: prop.bool(true),\n    label: prop.string(),\n    orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'horizontal'),\n  },\n  setup(props) {\n    const roleAttr = () => (props.decorative.value ? 'none' : 'separator');\n    const ariaHidden = () => (props.decorative.value ? 'true' : null);\n\n    return html`\n      ${() =>\n        props.label.value\n          ? html`\n              <div class=\"separator-wrapper\" part=\"wrapper\">\n                <hr\n                  class=\"separator\"\n                  part=\"separator\"\n                  role=\"${roleAttr}\"\n                  aria-hidden=\"${ariaHidden}\"\n                  aria-orientation=\"${() => props.orientation.value}\" />\n                <span class=\"separator-label\" part=\"label\">${() => props.label.value}</span>\n                <hr\n                  class=\"separator\"\n                  part=\"separator\"\n                  role=\"${roleAttr}\"\n                  aria-hidden=\"${ariaHidden}\"\n                  aria-orientation=\"${() => props.orientation.value}\" />\n              </div>\n            `\n          : html`\n              <hr\n                class=\"separator\"\n                part=\"separator\"\n                role=\"${roleAttr}\"\n                aria-hidden=\"${ariaHidden}\"\n                aria-orientation=\"${() => props.orientation.value}\" />\n            `}\n    `;\n  },\n  styles: [colorThemeMixin, componentStyles],\n});\n"],"mappings":"sMAyCA,IAAa,EAAgB,iBAC7B,EAAA,EAAA,OAAA,CAA0B,EAAe,CACvC,MAAO,CACL,MAAO,EAAA,KAAK,OAAmB,EAC/B,WAAY,EAAA,KAAK,KAAK,EAAI,EAC1B,MAAO,EAAA,KAAK,OAAO,EACnB,YAAa,EAAA,KAAK,MAAM,CAAC,aAAc,UAAU,EAAY,YAAY,CAC3E,EACA,MAAM,EAAO,CACX,IAAM,MAAkB,EAAM,WAAW,MAAQ,OAAS,YACpD,MAAoB,EAAM,WAAW,MAAQ,OAAS,KAE5D,MAAO,GAAA,IAAI;YAEP,EAAM,MAAM,MACR,EAAA,IAAI;;;;;0BAKU,EAAS;iCACF,EAAW;0CACA,EAAM,YAAY,MAAM;iEACD,EAAM,MAAM,MAAM;;;;0BAI3D,EAAS;iCACF,EAAW;0CACA,EAAM,YAAY,MAAM;;cAGxD,EAAA,IAAI;;;;wBAIQ,EAAS;+BACF,EAAW;wCACA,EAAM,YAAY,MAAM;cACpD;KAEZ,EACA,OAAQ,CAAC,EAAA,gBAAiB,EAAA,OAAe,CAC3C,CAAC"}