@poupe/vue/dist/theme-scheme/index.mjs.map

Vue component library for Poupe UI framework with theme customization and accessibility support

{"version":3,"file":"index.mjs","names":[],"sources":["../../src/components/variants/consts.ts","../../src/components/theme/scheme/slot.vue","../../src/components/theme/scheme/slot.vue","../../src/components/theme/scheme/groups.vue","../../src/components/theme/scheme/groups.vue","../../src/components/theme/scheme/colors.vue","../../src/components/theme/scheme/colors.vue","../../src/components/theme/scheme/error.vue","../../src/components/theme/scheme/error.vue","../../src/components/theme/scheme/group.vue","../../src/components/theme/scheme/group.vue","../../src/components/theme/scheme/extra.vue","../../src/components/theme/scheme/extra.vue","../../src/components/theme/scheme/neutral.vue","../../src/components/theme/scheme/neutral.vue","../../src/components/theme/scheme.vue","../../src/components/theme/scheme.vue"],"sourcesContent":["export const pe: Record<number, string> = {\n    0: 'pe-0',\n    1: 'pe-1',\n    2: 'pe-2',\n    3: 'pe-3',\n    4: 'pe-4',\n  }, ps: Record<number, string> = {\n    0: 'ps-0',\n    1: 'ps-1',\n    2: 'ps-2',\n    3: 'ps-3',\n    4: 'ps-4',\n    5: 'ps-5',\n    6: 'ps-6',\n  }, px: Record<number, string> = {\n    0: 'px-0',\n    1: 'px-1',\n    2: 'px-2',\n    3: 'px-3',\n    4: 'px-4',\n  }, py: Record<number, string> = {\n    0: 'py-0',\n    1: 'py-1',\n    2: 'py-2',\n    3: 'py-3',\n    4: 'py-4',\n  };\n\n/** Mapping of justify content classes for Tailwind CSS grid and flex layouts */\nexport const justifyClasses: Record<string, string> = {\n  start: 'justify-start',\n  between: 'justify-between',\n  around: 'justify-around',\n  evenly: 'justify-evenly',\n};\n\n/** Mapping of grid column classes for Tailwind CSS grid layouts */\nexport const gridColsClasses: Record<number, string> = {\n  1: 'grid-cols-1',\n  2: 'grid-cols-2',\n  3: 'grid-cols-3',\n  4: 'grid-cols-4',\n  5: 'grid-cols-5',\n  6: 'grid-cols-6',\n  7: 'grid-cols-7',\n};\n","<script lang=\"ts\">\nexport interface ThemeSchemeSlotProps {\n  bg: string\n  label?: string\n  text: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\nconst props = defineProps<ThemeSchemeSlotProps>();\n\nconst label = computed(() => props.label || props.bg?.split('-').slice(1).join(' ') || 'undefined');\n</script>\n\n<template>\n  <div\n    class=\"p-2 capitalize flex items-center justify-center text-center leading-tight h-full overflow-hidden\"\n    :class=\"[bg, text]\"\n    role=\"status\"\n    :aria-label=\"label\"\n  >\n    <span\n      class=\"block w-full\"\n    >\n      {{ label }}\n    </span>\n  </div>\n</template>\n","<script lang=\"ts\">\nexport interface ThemeSchemeSlotProps {\n  bg: string\n  label?: string\n  text: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\nconst props = defineProps<ThemeSchemeSlotProps>();\n\nconst label = computed(() => props.label || props.bg?.split('-').slice(1).join(' ') || 'undefined');\n</script>\n\n<template>\n  <div\n    class=\"p-2 capitalize flex items-center justify-center text-center leading-tight h-full overflow-hidden\"\n    :class=\"[bg, text]\"\n    role=\"status\"\n    :aria-label=\"label\"\n  >\n    <span\n      class=\"block w-full\"\n    >\n      {{ label }}\n    </span>\n  </div>\n</template>\n","<script lang=\"ts\">\nimport type { ThemeSchemeGroupProps } from './group.vue';\n\nexport {\n  type ThemeSchemeGroupEntry,\n} from './group.vue';\n\nexport interface ThemeSchemeGroupsProps {\n  ariaLabel?: string\n  groups: Array<ThemeSchemeGroupProps['entries']>\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { gridColsClasses } from './utils';\n\nimport type { ThemeSchemeGroupEntry, ThemeSchemeGroupItem } from './group.vue';\nimport ThemeSchemeSlot from './slot.vue';\n\nconst props = defineProps<ThemeSchemeGroupsProps>();\n\nconst ariaRole = computed(() => props.ariaLabel ? 'group' : undefined);\nconst ariaLabel = computed(() => props.ariaLabel);\n\nconst maxEntries = computed(() => Math.max(...props.groups.map((group) => group.length)));\n\n// Create a flattened structure to avoid repeated calls and type casting\nconst entriesGrid = computed(() => {\n  const grid: Array<Array<ThemeSchemeGroupEntry | undefined>> = [];\n\n  for (const [groupIndex, group] of props.groups.entries()) {\n    grid[groupIndex] = [];\n    for (let entryIndex = 0; entryIndex < maxEntries.value; entryIndex++) {\n      grid[groupIndex][entryIndex] = entryIndex < group.length ? group[entryIndex] : undefined;\n    }\n  }\n\n  return grid;\n});\n\nconst isArrayEntry = (entry: ThemeSchemeGroupEntry): entry is ThemeSchemeGroupItem[] => {\n  return Array.isArray(entry);\n};\n</script>\n\n<template>\n  <div\n    :role=\"ariaRole\"\n    :aria-label=\"ariaLabel\"\n    class=\"grid gap-2 w-full overflow-auto\"\n    :class=\"gridColsClasses[props.groups.length]\"\n    :style=\"`grid-template-rows: repeat(${maxEntries}, 3rem);`\"\n  >\n    <div\n      v-for=\"(groupEntries, groupIndex) in entriesGrid\"\n      :key=\"groupIndex\"\n      class=\"grid gap-0\"\n      :style=\"`grid-template-rows: subgrid; grid-row: 1 / ${maxEntries + 1};`\"\n    >\n      <template\n        v-for=\"(entry, entryIndex) in groupEntries\"\n        :key=\"entryIndex\"\n      >\n        <div\n          v-if=\"entry\"\n          :style=\"`grid-row: ${entryIndex + 1};`\"\n        >\n          <div\n            v-if=\"isArrayEntry(entry)\"\n            class=\"grid grid-flow-col h-12\"\n            :class=\"gridColsClasses[entry.length]\"\n          >\n            <theme-scheme-slot\n              v-for=\"(item, itemIndex) in entry\"\n              :key=\"itemIndex\"\n              :class=\"item.class\"\n              v-bind=\"item\"\n            />\n          </div>\n          <theme-scheme-slot\n            v-else\n            :class=\"entry.class\"\n            v-bind=\"entry\"\n          />\n        </div>\n        <div\n          v-else\n          :style=\"`grid-row: ${entryIndex + 1};`\"\n        />\n      </template>\n    </div>\n  </div>\n</template>\n","<script lang=\"ts\">\nimport type { ThemeSchemeGroupProps } from './group.vue';\n\nexport {\n  type ThemeSchemeGroupEntry,\n} from './group.vue';\n\nexport interface ThemeSchemeGroupsProps {\n  ariaLabel?: string\n  groups: Array<ThemeSchemeGroupProps['entries']>\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { gridColsClasses } from './utils';\n\nimport type { ThemeSchemeGroupEntry, ThemeSchemeGroupItem } from './group.vue';\nimport ThemeSchemeSlot from './slot.vue';\n\nconst props = defineProps<ThemeSchemeGroupsProps>();\n\nconst ariaRole = computed(() => props.ariaLabel ? 'group' : undefined);\nconst ariaLabel = computed(() => props.ariaLabel);\n\nconst maxEntries = computed(() => Math.max(...props.groups.map((group) => group.length)));\n\n// Create a flattened structure to avoid repeated calls and type casting\nconst entriesGrid = computed(() => {\n  const grid: Array<Array<ThemeSchemeGroupEntry | undefined>> = [];\n\n  for (const [groupIndex, group] of props.groups.entries()) {\n    grid[groupIndex] = [];\n    for (let entryIndex = 0; entryIndex < maxEntries.value; entryIndex++) {\n      grid[groupIndex][entryIndex] = entryIndex < group.length ? group[entryIndex] : undefined;\n    }\n  }\n\n  return grid;\n});\n\nconst isArrayEntry = (entry: ThemeSchemeGroupEntry): entry is ThemeSchemeGroupItem[] => {\n  return Array.isArray(entry);\n};\n</script>\n\n<template>\n  <div\n    :role=\"ariaRole\"\n    :aria-label=\"ariaLabel\"\n    class=\"grid gap-2 w-full overflow-auto\"\n    :class=\"gridColsClasses[props.groups.length]\"\n    :style=\"`grid-template-rows: repeat(${maxEntries}, 3rem);`\"\n  >\n    <div\n      v-for=\"(groupEntries, groupIndex) in entriesGrid\"\n      :key=\"groupIndex\"\n      class=\"grid gap-0\"\n      :style=\"`grid-template-rows: subgrid; grid-row: 1 / ${maxEntries + 1};`\"\n    >\n      <template\n        v-for=\"(entry, entryIndex) in groupEntries\"\n        :key=\"entryIndex\"\n      >\n        <div\n          v-if=\"entry\"\n          :style=\"`grid-row: ${entryIndex + 1};`\"\n        >\n          <div\n            v-if=\"isArrayEntry(entry)\"\n            class=\"grid grid-flow-col h-12\"\n            :class=\"gridColsClasses[entry.length]\"\n          >\n            <theme-scheme-slot\n              v-for=\"(item, itemIndex) in entry\"\n              :key=\"itemIndex\"\n              :class=\"item.class\"\n              v-bind=\"item\"\n            />\n          </div>\n          <theme-scheme-slot\n            v-else\n            :class=\"entry.class\"\n            v-bind=\"entry\"\n          />\n        </div>\n        <div\n          v-else\n          :style=\"`grid-row: ${entryIndex + 1};`\"\n        />\n      </template>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport {\n  type ThemeSchemeGroupEntry,\n  default as ThemeSchemeGroups,\n  type ThemeSchemeGroupsProps,\n} from './groups.vue';\n\nconst primary: ThemeSchemeGroupEntry[] = [\n  { bg: 'bg-primary', text: 'text-on-primary' },\n  { bg: 'bg-on-primary', text: 'text-primary' },\n  { bg: 'bg-primary-container', text: 'text-on-primary-container', class: 'mt-1' },\n  { bg: 'bg-on-primary-container', text: 'text-primary-container' },\n  [\n    { bg: 'bg-primary-fixed', text: 'text-on-primary-fixed' },\n    { bg: 'bg-primary-fixed-dim', text: 'text-on-primary-fixed' },\n  ],\n  { bg: 'bg-on-primary-fixed', text: 'text-primary-fixed' },\n  { bg: 'bg-on-primary-fixed-variant', text: 'text-primary-fixed' },\n];\n\nconst secondary: ThemeSchemeGroupEntry[] = [\n  { bg: 'bg-secondary', text: 'text-on-secondary' },\n  { bg: 'bg-on-secondary', text: 'text-secondary' },\n  { bg: 'bg-secondary-container', text: 'text-on-secondary-container', class: 'mt-1' },\n  { bg: 'bg-on-secondary-container', text: 'text-secondary-container' },\n  [\n    { bg: 'bg-secondary-fixed', text: 'text-on-secondary-fixed' },\n    { bg: 'bg-secondary-fixed-dim', text: 'text-on-secondary-fixed' },\n  ],\n  { bg: 'bg-on-secondary-fixed', text: 'text-secondary-fixed' },\n  { bg: 'bg-on-secondary-fixed-variant', text: 'text-secondary-fixed' },\n];\n\nconst tertiary: ThemeSchemeGroupEntry[] = [\n  { bg: 'bg-tertiary', text: 'text-on-tertiary' },\n  { bg: 'bg-on-tertiary', text: 'text-tertiary' },\n  { bg: 'bg-tertiary-container', text: 'text-on-tertiary-container', class: 'mt-1' },\n  { bg: 'bg-on-tertiary-container', text: 'text-tertiary-container' },\n  [\n    { bg: 'bg-tertiary-fixed', text: 'text-on-tertiary-fixed' },\n    { bg: 'bg-tertiary-fixed-dim', text: 'text-on-tertiary-fixed' },\n  ],\n  { bg: 'bg-on-tertiary-fixed', text: 'text-tertiary-fixed' },\n  { bg: 'bg-on-tertiary-fixed-variant', text: 'text-tertiary-fixed' },\n];\n\nconst groups: ThemeSchemeGroupsProps = {\n  ariaLabel: 'Main Colors',\n  groups: [primary, secondary, tertiary],\n};\n</script>\n\n<template>\n  <theme-scheme-groups v-bind=\"groups\" />\n</template>\n","<script setup lang=\"ts\">\nimport {\n  type ThemeSchemeGroupEntry,\n  default as ThemeSchemeGroups,\n  type ThemeSchemeGroupsProps,\n} from './groups.vue';\n\nconst primary: ThemeSchemeGroupEntry[] = [\n  { bg: 'bg-primary', text: 'text-on-primary' },\n  { bg: 'bg-on-primary', text: 'text-primary' },\n  { bg: 'bg-primary-container', text: 'text-on-primary-container', class: 'mt-1' },\n  { bg: 'bg-on-primary-container', text: 'text-primary-container' },\n  [\n    { bg: 'bg-primary-fixed', text: 'text-on-primary-fixed' },\n    { bg: 'bg-primary-fixed-dim', text: 'text-on-primary-fixed' },\n  ],\n  { bg: 'bg-on-primary-fixed', text: 'text-primary-fixed' },\n  { bg: 'bg-on-primary-fixed-variant', text: 'text-primary-fixed' },\n];\n\nconst secondary: ThemeSchemeGroupEntry[] = [\n  { bg: 'bg-secondary', text: 'text-on-secondary' },\n  { bg: 'bg-on-secondary', text: 'text-secondary' },\n  { bg: 'bg-secondary-container', text: 'text-on-secondary-container', class: 'mt-1' },\n  { bg: 'bg-on-secondary-container', text: 'text-secondary-container' },\n  [\n    { bg: 'bg-secondary-fixed', text: 'text-on-secondary-fixed' },\n    { bg: 'bg-secondary-fixed-dim', text: 'text-on-secondary-fixed' },\n  ],\n  { bg: 'bg-on-secondary-fixed', text: 'text-secondary-fixed' },\n  { bg: 'bg-on-secondary-fixed-variant', text: 'text-secondary-fixed' },\n];\n\nconst tertiary: ThemeSchemeGroupEntry[] = [\n  { bg: 'bg-tertiary', text: 'text-on-tertiary' },\n  { bg: 'bg-on-tertiary', text: 'text-tertiary' },\n  { bg: 'bg-tertiary-container', text: 'text-on-tertiary-container', class: 'mt-1' },\n  { bg: 'bg-on-tertiary-container', text: 'text-tertiary-container' },\n  [\n    { bg: 'bg-tertiary-fixed', text: 'text-on-tertiary-fixed' },\n    { bg: 'bg-tertiary-fixed-dim', text: 'text-on-tertiary-fixed' },\n  ],\n  { bg: 'bg-on-tertiary-fixed', text: 'text-tertiary-fixed' },\n  { bg: 'bg-on-tertiary-fixed-variant', text: 'text-tertiary-fixed' },\n];\n\nconst groups: ThemeSchemeGroupsProps = {\n  ariaLabel: 'Main Colors',\n  groups: [primary, secondary, tertiary],\n};\n</script>\n\n<template>\n  <theme-scheme-groups v-bind=\"groups\" />\n</template>\n","<script setup lang=\"ts\">\nimport {\n  type ThemeSchemeGroupEntry,\n  default as ThemeSchemeGroups,\n  type ThemeSchemeGroupsProps,\n} from './groups.vue';\n\nconst error: ThemeSchemeGroupEntry[] = [\n  { bg: 'bg-error', text: 'text-on-error' },\n  { bg: 'bg-on-error', text: 'text-error' },\n  { bg: 'bg-error-container', text: 'text-on-error-container', class: 'mt-1' },\n  { bg: 'bg-on-error-container', text: 'text-error-container' },\n];\n\nconst groups: ThemeSchemeGroupsProps = {\n  ariaLabel: 'Error Colors',\n  groups: [error],\n};\n</script>\n\n<template>\n  <theme-scheme-groups v-bind=\"groups\" />\n</template>\n","<script setup lang=\"ts\">\nimport {\n  type ThemeSchemeGroupEntry,\n  default as ThemeSchemeGroups,\n  type ThemeSchemeGroupsProps,\n} from './groups.vue';\n\nconst error: ThemeSchemeGroupEntry[] = [\n  { bg: 'bg-error', text: 'text-on-error' },\n  { bg: 'bg-on-error', text: 'text-error' },\n  { bg: 'bg-error-container', text: 'text-on-error-container', class: 'mt-1' },\n  { bg: 'bg-on-error-container', text: 'text-error-container' },\n];\n\nconst groups: ThemeSchemeGroupsProps = {\n  ariaLabel: 'Error Colors',\n  groups: [error],\n};\n</script>\n\n<template>\n  <theme-scheme-groups v-bind=\"groups\" />\n</template>\n","<script lang=\"ts\">\nimport type { ThemeSchemeSlotProps } from './slot.vue';\n\nexport interface ThemeSchemeGroupItem extends ThemeSchemeSlotProps {\n  class?: string\n};\n\nexport type ThemeSchemeGroupEntry = Array<ThemeSchemeGroupItem> | ThemeSchemeGroupItem;\n\nexport interface ThemeSchemeGroupProps {\n  ariaLabel?: string\n  entries: Array<ThemeSchemeGroupEntry>\n  justify?: keyof typeof justifyClasses\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\nimport {\n  gridColsClasses,\n  justifyClasses,\n} from './utils';\n\nimport ThemeSchemeSlot from './slot.vue';\n\nconst props = withDefaults(defineProps<ThemeSchemeGroupProps>(), {\n  justify: 'start',\n  ariaLabel: undefined,\n});\n\nconst ariaRole = computed(() => props.ariaLabel ? 'group' : undefined);\nconst ariaLabel = computed(() => props.ariaLabel);\nconst justifyClass = computed(() => justifyClasses[props.justify]);\n\nconst colsClass = (n: number) => gridColsClasses[n];\n</script>\n\n<template>\n  <div\n    :role=\"ariaRole\"\n    :aria-label=\"ariaLabel\"\n    class=\"flex flex-col overflow-auto\"\n    :class=\"justifyClass\"\n  >\n    <div\n      v-for=\"(v, i) in entries\"\n      :key=\"i\"\n    >\n      <div\n        v-if=\"Array.isArray(v)\"\n        class=\"grid grid-flow-col mt-2 h-12\"\n        :class=\"colsClass(v.length)\"\n      >\n        <theme-scheme-slot\n          v-for=\"(vv, j) in v\"\n          :key=\"j\"\n          :class=\"vv.class\"\n          v-bind=\"vv\"\n        />\n      </div>\n      <theme-scheme-slot\n        v-else\n        :class=\"v.class\"\n        v-bind=\"v\"\n      />\n    </div>\n  </div>\n</template>\n","<script lang=\"ts\">\nimport type { ThemeSchemeSlotProps } from './slot.vue';\n\nexport interface ThemeSchemeGroupItem extends ThemeSchemeSlotProps {\n  class?: string\n};\n\nexport type ThemeSchemeGroupEntry = Array<ThemeSchemeGroupItem> | ThemeSchemeGroupItem;\n\nexport interface ThemeSchemeGroupProps {\n  ariaLabel?: string\n  entries: Array<ThemeSchemeGroupEntry>\n  justify?: keyof typeof justifyClasses\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\nimport {\n  gridColsClasses,\n  justifyClasses,\n} from './utils';\n\nimport ThemeSchemeSlot from './slot.vue';\n\nconst props = withDefaults(defineProps<ThemeSchemeGroupProps>(), {\n  justify: 'start',\n  ariaLabel: undefined,\n});\n\nconst ariaRole = computed(() => props.ariaLabel ? 'group' : undefined);\nconst ariaLabel = computed(() => props.ariaLabel);\nconst justifyClass = computed(() => justifyClasses[props.justify]);\n\nconst colsClass = (n: number) => gridColsClasses[n];\n</script>\n\n<template>\n  <div\n    :role=\"ariaRole\"\n    :aria-label=\"ariaLabel\"\n    class=\"flex flex-col overflow-auto\"\n    :class=\"justifyClass\"\n  >\n    <div\n      v-for=\"(v, i) in entries\"\n      :key=\"i\"\n    >\n      <div\n        v-if=\"Array.isArray(v)\"\n        class=\"grid grid-flow-col mt-2 h-12\"\n        :class=\"colsClass(v.length)\"\n      >\n        <theme-scheme-slot\n          v-for=\"(vv, j) in v\"\n          :key=\"j\"\n          :class=\"vv.class\"\n          v-bind=\"vv\"\n        />\n      </div>\n      <theme-scheme-slot\n        v-else\n        :class=\"v.class\"\n        v-bind=\"v\"\n      />\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport {\n  default as ThemeSchemeGroup,\n  type ThemeSchemeGroupProps,\n} from './group.vue';\n\nconst group: ThemeSchemeGroupProps = {\n  ariaLabel: 'Additional Colors',\n  justify: 'between',\n  entries: [\n    { bg: 'bg-inverse-surface', text: 'text-on-inverse-surface' },\n    { bg: 'bg-on-inverse-surface', text: 'text-inverse-surface' },\n    { bg: 'bg-inverse-primary', text: 'text-inverse-surface' },\n    [\n      { bg: 'bg-scrim', text: 'text-primary-50' },\n      { bg: 'bg-shadow', text: 'text-primary-50' },\n    ],\n  ],\n};\n</script>\n\n<template>\n  <theme-scheme-group v-bind=\"group\" />\n</template>\n","<script setup lang=\"ts\">\nimport {\n  default as ThemeSchemeGroup,\n  type ThemeSchemeGroupProps,\n} from './group.vue';\n\nconst group: ThemeSchemeGroupProps = {\n  ariaLabel: 'Additional Colors',\n  justify: 'between',\n  entries: [\n    { bg: 'bg-inverse-surface', text: 'text-on-inverse-surface' },\n    { bg: 'bg-on-inverse-surface', text: 'text-inverse-surface' },\n    { bg: 'bg-inverse-primary', text: 'text-inverse-surface' },\n    [\n      { bg: 'bg-scrim', text: 'text-primary-50' },\n      { bg: 'bg-shadow', text: 'text-primary-50' },\n    ],\n  ],\n};\n</script>\n\n<template>\n  <theme-scheme-group v-bind=\"group\" />\n</template>\n","<script setup lang=\"ts\">\nimport {\n  default as ThemeSchemeSlot,\n  type ThemeSchemeSlotProps,\n} from './slot.vue';\n\nimport { gridColsClasses } from './utils';\n\nconst data: Array<Array<ThemeSchemeSlotProps>> = [\n  [\n    { bg: 'bg-surface-dim', text: 'text-on-surface-dim' },\n    { bg: 'bg-surface', text: 'text-on-surface' },\n    { bg: 'bg-surface-bright', text: 'text-on-surface-bright' },\n  ], [\n    { bg: 'bg-surface-container-lowest', text: 'text-on-surface-container-lowest' },\n    { bg: 'bg-surface-container-low', text: 'text-on-surface-container-low' },\n    { bg: 'bg-surface-container', text: 'text-on-surface-container' },\n    { bg: 'bg-surface-container-high', text: 'text-on-surface-container-high' },\n    { bg: 'bg-surface-container-highest', text: 'text-on-surface-container-highest' },\n  ], [\n    { bg: 'bg-on-surface', text: 'text-surface' },\n    { bg: 'bg-on-surface-variant', text: 'text-surface' },\n    { bg: 'bg-outline', text: 'text-surface' },\n    { bg: 'bg-outline-variant', text: 'text-on-surface' },\n  ],\n];\n\n</script>\n\n<template>\n  <div\n    class=\"flex flex-col h-full\"\n    role=\"group\"\n    aria-label=\"Neutral Colors\"\n  >\n    <div\n      v-for=\"(d, i) in data\"\n      :key=\"i\"\n      class=\"flex-1\"\n    >\n      <div\n        class=\"grid h-full items-center\"\n        :class=\"gridColsClasses[d.length]\"\n      >\n        <theme-scheme-slot\n          v-for=\"v in d\"\n          :key=\"v.bg\"\n          v-bind=\"v\"\n        />\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport {\n  default as ThemeSchemeSlot,\n  type ThemeSchemeSlotProps,\n} from './slot.vue';\n\nimport { gridColsClasses } from './utils';\n\nconst data: Array<Array<ThemeSchemeSlotProps>> = [\n  [\n    { bg: 'bg-surface-dim', text: 'text-on-surface-dim' },\n    { bg: 'bg-surface', text: 'text-on-surface' },\n    { bg: 'bg-surface-bright', text: 'text-on-surface-bright' },\n  ], [\n    { bg: 'bg-surface-container-lowest', text: 'text-on-surface-container-lowest' },\n    { bg: 'bg-surface-container-low', text: 'text-on-surface-container-low' },\n    { bg: 'bg-surface-container', text: 'text-on-surface-container' },\n    { bg: 'bg-surface-container-high', text: 'text-on-surface-container-high' },\n    { bg: 'bg-surface-container-highest', text: 'text-on-surface-container-highest' },\n  ], [\n    { bg: 'bg-on-surface', text: 'text-surface' },\n    { bg: 'bg-on-surface-variant', text: 'text-surface' },\n    { bg: 'bg-outline', text: 'text-surface' },\n    { bg: 'bg-outline-variant', text: 'text-on-surface' },\n  ],\n];\n\n</script>\n\n<template>\n  <div\n    class=\"flex flex-col h-full\"\n    role=\"group\"\n    aria-label=\"Neutral Colors\"\n  >\n    <div\n      v-for=\"(d, i) in data\"\n      :key=\"i\"\n      class=\"flex-1\"\n    >\n      <div\n        class=\"grid h-full items-center\"\n        :class=\"gridColsClasses[d.length]\"\n      >\n        <theme-scheme-slot\n          v-for=\"v in d\"\n          :key=\"v.bg\"\n          v-bind=\"v\"\n        />\n      </div>\n    </div>\n  </div>\n</template>\n","<script lang=\"ts\">\nexport interface ThemeSchemeProps {\n  ariaLabel?: string\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\nimport {\n  ThemeSchemeColors,\n  ThemeSchemeError,\n  ThemeSchemeExtra,\n  ThemeSchemeNeutral,\n} from './scheme';\n\nconst props = defineProps<ThemeSchemeProps>();\n\nconst ariaLabel = computed(() => props.ariaLabel || 'Theme Colors');\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'grid grid-cols-4 gap-2 h-full',\n      'text-[length:var(--text-3xs)] sm:text-[length:var(--text-2xs)] md:text-xs lg:text-sm theme-scheme-sizes',\n    ]\"\n    role=\"region\"\n    :aria-label=\"ariaLabel\"\n  >\n    <theme-scheme-colors class=\"col-span-3 h-full\" />\n    <theme-scheme-error class=\"h-full\" />\n    <theme-scheme-neutral class=\"col-span-3 h-full\" />\n    <theme-scheme-extra class=\"h-full\" />\n  </div>\n</template>\n\n<style scoped>\n.theme-scheme-sizes {\n  --text-3xs: calc(var(--text-base) * 0.5);\n  --text-2xs: calc(var(--text-base) * 0.625);\n}\n</style>\n","<script lang=\"ts\">\nexport interface ThemeSchemeProps {\n  ariaLabel?: string\n};\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\nimport {\n  ThemeSchemeColors,\n  ThemeSchemeError,\n  ThemeSchemeExtra,\n  ThemeSchemeNeutral,\n} from './scheme';\n\nconst props = defineProps<ThemeSchemeProps>();\n\nconst ariaLabel = computed(() => props.ariaLabel || 'Theme Colors');\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'grid grid-cols-4 gap-2 h-full',\n      'text-[length:var(--text-3xs)] sm:text-[length:var(--text-2xs)] md:text-xs lg:text-sm theme-scheme-sizes',\n    ]\"\n    role=\"region\"\n    :aria-label=\"ariaLabel\"\n  >\n    <theme-scheme-colors class=\"col-span-3 h-full\" />\n    <theme-scheme-error class=\"h-full\" />\n    <theme-scheme-neutral class=\"col-span-3 h-full\" />\n    <theme-scheme-extra class=\"h-full\" />\n  </div>\n</template>\n\n<style scoped>\n.theme-scheme-sizes {\n  --text-3xs: calc(var(--text-base) * 0.5);\n  --text-2xs: calc(var(--text-base) * 0.625);\n}\n</style>\n"],"mappings":"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"}