@dialpad/dialtone-vue 3.223.0-next.3 → 3.223.0-next.4

package/dist/Combobox-CYEmi3dv.cjs

@@ -0,0 +1,3 @@
+require(`./chunk-Bmb41Sf3.cjs`);const e=require(`./common/constants/sizes.cjs`),t=require(`./common/validators/index.cjs`),n=require(`./common/utils/index.cjs`),r=require(`./_plugin-vue_export-helper-D8jCH6HB.cjs`),i=require(`./common/mixins/keyboard-list-navigation.cjs`),a=require(`./lib/combobox/combobox-loading-list.cjs`),o=require(`./lib/combobox/combobox-empty-list.cjs`),s=require(`./lib/combobox/combobox-constants.cjs`);let c=require(`vue`);var l={name:`DtCombobox`,components:{ComboboxLoadingList:a.default,ComboboxEmptyList:o.default},mixins:[i.default({indexKey:`highlightIndex`,idKey:`highlightId`,listElementKey:`getListElement`,afterHighlightMethod:`afterHighlight`,beginningOfListMethod:`beginningOfListMethod`,endOfListMethod:`endOfListMethod`,activeItemKey:`activeItemEl`})],props:{label:{type:String,required:!0},showLabel:{type:Boolean,default:!0},size:{type:[String,Number],default:null,validator:n=>n===null||Object.values(s.COMBOBOX_LABEL_SIZES).includes(n)||t.ordinalSizeValidator(e.COMPONENT_SIZES)(n)},description:{type:String,default:``},listId:{type:String,default(){return n.getUniqueString()}},onBeginningOfList:{type:Function,default:null},onEndOfList:{type:Function,default:null},showList:{type:Boolean,default:!1},listRenderedOutside:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},emptyList:{type:Boolean,default:!1},emptyStateMessage:{type:String,default:``},emptyStateClass:{type:[String,Object,Array],default:``},clickOnSelect:{type:Boolean,default:!1}},emits:[`select`,`escape`,`highlight`,`opened`],data(){return{outsideRenderedListRef:null,hasSlotContent:n.hasSlotContent}},computed:{inputProps(){return{label:this.label,showLabel:this.showLabel,size:this.size,description:this.description,role:`combobox`,"aria-label":this.label,"aria-expanded":this.showList.toString(),"aria-owns":this.listId,"aria-haspopup":`listbox`,"aria-activedescendant":this.activeItemId,"aria-controls":this.listId}},listProps(){return{role:`listbox`,id:this.listId,class:`d-ps-relative`,"aria-label":this.label}},beginningOfListMethod(){return this.onBeginningOfList||this.jumpToEnd},endOfListMethod(){return this.onEndOfList||this.jumpToBeginning},activeItemId(){if(!(!this.showList||this.highlightIndex<0||this.loading))return this.highlightId},activeItemEl(){return this.highlightId?this.getListElement().querySelector(`#`+this.highlightId):``}},watch:{showList(e){this.listRenderedOutside||(this.setInitialHighlightIndex(),this.$emit(`opened`,e)),!e&&this.outsideRenderedListRef&&(this.outsideRenderedListRef.removeEventListener(`mousemove`,this.onMouseHighlight),this.outsideRenderedListRef=null)},loading(){this.$nextTick(()=>{this.setInitialHighlightIndex()})},$props:{deep:!0,immediate:!0,handler(){this.validateEmptyListProps()}}},created(){this.validateEmptyListProps()},methods:{onMouseHighlight(e){if(this.loading)return;let t=e.target.closest(`li`);t&&this.highlightId!==t.id&&this.setHighlightId(t.id)},getListElement(){return this.outsideRenderedListRef??this.$refs.listWrapper?.querySelector(`#${this.listId}`)},clearHighlightIndex(){this.showList&&this.setHighlightIndex(-1)},afterHighlight(){this.loading||this.$emit(`highlight`,this.highlightIndex)},onEnterKey(){this.loading||this.emptyList||this.highlightIndex>=0&&(this.$emit(`select`,this.highlightIndex),this.clickOnSelect&&this.activeItemEl?.click())},onEscapeKey(){this.$emit(`escape`)},onOpen(e,t){this.outsideRenderedListRef=t,this.outsideRenderedListRef?.addEventListener(`mousemove`,this.onMouseHighlight),this.$emit(`opened`,e),e&&this.setInitialHighlightIndex()},onKeyValidation(e,t){!this.showList||!this.getListElement()||this[t](e)},setInitialHighlightIndex(){this.showList&&this.$nextTick(()=>{this.setHighlightIndex(this.loading?-1:0)})},validateEmptyListProps(){this.$slots.emptyListItem||this.emptyList&&!this.emptyStateMessage&&console.error(`Invalid props: you must pass both props emptyList and emptyStateMessage to show the
+      empty message.`)}}},u={"data-qa":`dt-combobox-input-wrapper`};function d(e,t,n,r,i,a){let o=(0,c.resolveComponent)(`combobox-loading-list`),s=(0,c.resolveComponent)(`combobox-empty-list`);return(0,c.openBlock)(),(0,c.createElementBlock)(`div`,{onKeydown:[t[3]||(t[3]=(0,c.withKeys)((0,c.withModifiers)(e=>a.onKeyValidation(e,`onEscapeKey`),[`stop`]),[`esc`])),t[4]||(t[4]=(0,c.withKeys)((0,c.withModifiers)(e=>a.onKeyValidation(e,`onEnterKey`),[`exact`]),[`enter`])),t[5]||(t[5]=(0,c.withKeys)((0,c.withModifiers)(e=>a.onKeyValidation(e,`onUpKey`),[`stop`,`prevent`]),[`up`])),t[6]||(t[6]=(0,c.withKeys)((0,c.withModifiers)(e=>a.onKeyValidation(e,`onDownKey`),[`stop`,`prevent`]),[`down`])),t[7]||(t[7]=(0,c.withKeys)((0,c.withModifiers)(e=>a.onKeyValidation(e,`onHomeKey`),[`stop`,`prevent`]),[`home`])),t[8]||(t[8]=(0,c.withKeys)((0,c.withModifiers)(e=>a.onKeyValidation(e,`onEndKey`),[`stop`,`prevent`]),[`end`]))]},[(0,c.createElementVNode)(`div`,u,[(0,c.renderSlot)(e.$slots,`input`,{inputProps:a.inputProps})]),n.showList?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,{key:0,ref:`listWrapper`,"data-qa":`dt-combobox-list-wrapper`,onMouseleave:t[0]||(t[0]=(...e)=>a.clearHighlightIndex&&a.clearHighlightIndex(...e)),onFocusout:t[1]||(t[1]=(...e)=>a.clearHighlightIndex&&a.clearHighlightIndex(...e)),onMousemoveCapture:t[2]||(t[2]=(...e)=>a.onMouseHighlight&&a.onMouseHighlight(...e))},[n.loading&&!n.listRenderedOutside?((0,c.openBlock)(),(0,c.createBlock)(o,(0,c.normalizeProps)((0,c.mergeProps)({key:0},a.listProps)),null,16)):n.emptyList&&(n.emptyStateMessage||i.hasSlotContent(e.$slots.emptyListItem))&&!n.listRenderedOutside?((0,c.openBlock)(),(0,c.createBlock)(s,(0,c.mergeProps)({key:1},a.listProps,{message:n.emptyStateMessage,"item-class":n.emptyStateClass}),{default:(0,c.withCtx)(()=>[(0,c.renderSlot)(e.$slots,`emptyListItem`)]),_:3},16,[`message`,`item-class`])):(0,c.renderSlot)(e.$slots,`list`,{key:2,listProps:a.listProps,opened:a.onOpen,clearHighlightIndex:a.clearHighlightIndex})],544)):(0,c.createCommentVNode)(``,!0)],32)}var f=r.t(l,[[`render`,d]]);Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return f}});
+//# sourceMappingURL=Combobox-CYEmi3dv.cjs.map

package/dist/Combobox-CYEmi3dv.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox-CYEmi3dv.cjs","names":[],"sources":["../components/Combobox/Combobox.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->\n<template>\n  <div\n    @keydown.esc.stop=\"onKeyValidation($event, 'onEscapeKey')\"\n    @keydown.enter.exact=\"onKeyValidation($event, 'onEnterKey')\"\n    @keydown.up.stop.prevent=\"onKeyValidation($event, 'onUpKey')\"\n    @keydown.down.stop.prevent=\"onKeyValidation($event, 'onDownKey')\"\n    @keydown.home.stop.prevent=\"onKeyValidation($event, 'onHomeKey')\"\n    @keydown.end.stop.prevent=\"onKeyValidation($event, 'onEndKey')\"\n  >\n    <div data-qa=\"dt-combobox-input-wrapper\">\n      <!-- @slot Slot for the combobox input element -->\n      <slot\n        name=\"input\"\n        :input-props=\"inputProps\"\n      />\n    </div>\n\n    <div\n      v-if=\"showList\"\n      ref=\"listWrapper\"\n      data-qa=\"dt-combobox-list-wrapper\"\n      @mouseleave=\"clearHighlightIndex\"\n      @focusout=\"clearHighlightIndex\"\n      @mousemove.capture=\"onMouseHighlight\"\n    >\n      <combobox-loading-list\n        v-if=\"loading && !listRenderedOutside\"\n        v-bind=\"listProps\"\n      />\n      <combobox-empty-list\n        v-else-if=\"emptyList && (emptyStateMessage || hasSlotContent($slots.emptyListItem)) && !listRenderedOutside\"\n        v-bind=\"listProps\"\n        :message=\"emptyStateMessage\"\n        :item-class=\"emptyStateClass\"\n      >\n        <slot name=\"emptyListItem\" />\n      </combobox-empty-list>\n      <!-- @slot Slot for the combobox list element -->\n      <slot\n        v-else\n        name=\"list\"\n        :list-props=\"listProps\"\n        :opened=\"onOpen\"\n        :clear-highlight-index=\"clearHighlightIndex\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nimport ComboboxLoadingList from './ComboboxLoadingList.vue';\nimport ComboboxEmptyList from './ComboboxEmptyList.vue';\nimport { DtKeyboardListNavigationMixin } from '@/common/mixins';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { COMBOBOX_LABEL_SIZES } from '@/components/Combobox';\nimport { COMPONENT_SIZES } from '@/common/constants';\nimport { ordinalSizeValidator } from '@/common/validators';\n\n/**\n * A combobox is a semantic component that displays an input element combined with a listbox,\n * which enables the user to select items from the list.\n * @see https://dialtone.dialpad.com/components/combobox.html\n */\nexport default {\n  name: 'DtCombobox',\n\n  components: {\n    ComboboxLoadingList,\n    ComboboxEmptyList,\n  },\n\n  mixins: [\n    DtKeyboardListNavigationMixin({\n      indexKey: 'highlightIndex',\n      idKey: 'highlightId',\n      listElementKey: 'getListElement',\n      afterHighlightMethod: 'afterHighlight',\n      beginningOfListMethod: 'beginningOfListMethod',\n      endOfListMethod: 'endOfListMethod',\n      activeItemKey: 'activeItemEl',\n    }),\n  ],\n\n  props: {\n    /**\n     * String to use for the input label.\n     */\n    label: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines visibility of input label.\n     * @values true, false\n     */\n    showLabel: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Size of the input.\n     * @values 100, 200, 300, 400, 500\n     */\n    size: {\n      type: [String, Number],\n      default: null,\n      validator: (t) => t === null\n        || Object.values(COMBOBOX_LABEL_SIZES).includes(t)\n        || ordinalSizeValidator(COMPONENT_SIZES)(t),\n    },\n\n    /**\n     * Description for the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Sets an ID on the list element of the component. Used by several aria attributes\n     * as well as when deriving the IDs for each item.\n     */\n    listId: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * A method that will be called when the selection goes past the beginning of the list.\n     */\n    onBeginningOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * A method that will be called when the selection goes past the end of the list.\n     */\n    onEndOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * Determines when to show the list element and also controls the aria-expanded attribute.\n     * @values true, false\n     */\n    showList: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If the list is rendered outside the component, like when using popover as the list wrapper.\n     * @values true, false\n     */\n    listRenderedOutside: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines when to show the skeletons and also controls aria-busy attribute.\n     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Sets the list to an empty state, and displays the message from prop `emptyStateMessage`.\n     * @values true, false\n     */\n    emptyList: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Message to show when the list is empty\n     */\n    emptyStateMessage: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the empty list element.\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    emptyStateClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Programmatically click on the active list item element when a selection\n     * comes from keyboard navigation, i.e. pressing the \"Enter\" key.\n     * @values true, false\n     */\n    clickOnSelect: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired when item selected\n     *\n     * @event select\n     * @type {Number}\n     */\n    'select',\n\n    /**\n     * Event fired when pressing escape\n     *\n     * @event escape\n     */\n    'escape',\n\n    /**\n     * Event fired when the highlight changes\n     *\n     * @event highlight\n     * @type {Number}\n     */\n    'highlight',\n\n    /**\n     * Event fired when list is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      // If the list is rendered at the root, rather than as a child\n      // of this component, this is the ref to that dom element. Set\n      // by the onOpen method.\n      outsideRenderedListRef: null,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    inputProps () {\n      return {\n        label: this.label,\n        showLabel: this.showLabel,\n        size: this.size,\n        description: this.description,\n        role: 'combobox',\n        'aria-label': this.label,\n        'aria-expanded': this.showList.toString(),\n        'aria-owns': this.listId,\n        'aria-haspopup': 'listbox',\n        'aria-activedescendant': this.activeItemId,\n        'aria-controls': this.listId,\n      };\n    },\n\n    listProps () {\n      return {\n        role: 'listbox',\n        id: this.listId,\n        // The list has to be positioned relatively so that the auto-scroll can\n        // calculate the correct offset for the list items.\n        class: 'd-ps-relative',\n        'aria-label': this.label,\n      };\n    },\n\n    beginningOfListMethod () {\n      return this.onBeginningOfList || this.jumpToEnd;\n    },\n\n    endOfListMethod () {\n      return this.onEndOfList || this.jumpToBeginning;\n    },\n\n    activeItemId () {\n      if (!this.showList || this.highlightIndex < 0 || this.loading) {\n        return;\n      }\n      return this.highlightId;\n    },\n\n    activeItemEl () {\n      if (!this.highlightId) return '';\n      return this.getListElement().querySelector('#' + this.highlightId);\n    },\n  },\n\n  watch: {\n    showList (showList) {\n      // When the list's visibility changes reset the highlight index.\n\n      if (!this.listRenderedOutside) {\n        this.setInitialHighlightIndex();\n        this.$emit('opened', showList);\n      }\n\n      if (!showList && this.outsideRenderedListRef) {\n        this.outsideRenderedListRef.removeEventListener('mousemove', this.onMouseHighlight);\n        this.outsideRenderedListRef = null;\n      }\n    },\n\n    loading () {\n      this.$nextTick(() => {\n        this.setInitialHighlightIndex();\n      });\n    },\n\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        this.validateEmptyListProps();\n      },\n    },\n  },\n\n  created () {\n    this.validateEmptyListProps();\n  },\n\n  methods: {\n    onMouseHighlight (e) {\n      if (this.loading) return;\n\n      const liElement = e.target.closest('li');\n\n      if (liElement && this.highlightId !== liElement.id) {\n        this.setHighlightId(liElement.id);\n      }\n    },\n\n    getListElement () {\n      return this.outsideRenderedListRef ?? this.$refs.listWrapper?.querySelector(`#${this.listId}`);\n    },\n\n    clearHighlightIndex () {\n      if (this.showList) {\n        this.setHighlightIndex(-1);\n      }\n    },\n\n    afterHighlight () {\n      if (this.loading) return;\n      this.$emit('highlight', this.highlightIndex);\n    },\n\n    onEnterKey () {\n      if (this.loading || this.emptyList) return;\n\n      if (this.highlightIndex >= 0) {\n        this.$emit('select', this.highlightIndex);\n\n        if (this.clickOnSelect) {\n          this.activeItemEl?.click();\n        }\n      }\n    },\n\n    onEscapeKey () {\n      this.$emit('escape');\n    },\n\n    onOpen (open, contentRef) {\n      this.outsideRenderedListRef = contentRef;\n      this.outsideRenderedListRef?.addEventListener('mousemove', this.onMouseHighlight);\n      this.$emit('opened', open);\n\n      if (open) {\n        this.setInitialHighlightIndex();\n      }\n    },\n\n    onKeyValidation (e, eventHandler) {\n      if (!this.showList || !this.getListElement()) return;\n\n      this[eventHandler](e);\n    },\n\n    setInitialHighlightIndex () {\n      if (!this.showList) return;\n      this.$nextTick(() => {\n      // When the list's is shown, reset the highlight index.\n      // If the list is loading, set to -1\n        this.setHighlightIndex(this.loading ? -1 : 0);\n      });\n    },\n\n    validateEmptyListProps () {\n      if (this.$slots.emptyListItem) { return; }\n\n      if (this.emptyList && !this.emptyStateMessage) {\n        console.error(`Invalid props: you must pass both props emptyList and emptyStateMessage to show the\n      empty message.`);\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"mcAgEA,IAAK,EAAU,CACb,KAAM,aAEN,WAAY,CACV,oBAAA,EAAA,QACA,kBAAA,EAAA,QACD,CAED,OAAQ,CACN,EAAA,QAA8B,CAC5B,SAAU,iBACV,MAAO,cACP,eAAgB,iBAChB,qBAAsB,iBACtB,sBAAuB,wBACvB,gBAAiB,kBACjB,cAAe,eAChB,CAAC,CACH,CAED,MAAO,CAIL,MAAO,CACL,KAAM,OACN,SAAU,GACX,CAMD,UAAW,CACT,KAAM,QACN,QAAS,GACV,CAMD,KAAM,CACJ,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,KACT,UAAY,GAAM,IAAM,MACnB,OAAO,OAAO,EAAA,qBAAqB,CAAC,SAAS,EAAC,EAC9C,EAAA,qBAAqB,EAAA,gBAAgB,CAAC,EAAE,CAC9C,CAKD,YAAa,CACX,KAAM,OACN,QAAS,GACV,CAMD,OAAQ,CACN,KAAM,OACN,SAAW,CAAE,OAAO,EAAA,iBAAiB,EACtC,CAKD,kBAAmB,CACjB,KAAM,SACN,QAAS,KACV,CAKD,YAAa,CACX,KAAM,SACN,QAAS,KACV,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAMD,oBAAqB,CACnB,KAAM,QACN,QAAS,GACV,CAMD,QAAS,CACP,KAAM,QACN,QAAS,GACV,CAMD,UAAW,CACT,KAAM,QACN,QAAS,GACV,CAKD,kBAAmB,CACjB,KAAM,OACN,QAAS,GACV,CAOD,gBAAiB,CACf,KAAM,CAAC,OAAQ,OAAQ,MAAM,CAC7B,QAAS,GACV,CAOD,cAAe,CACb,KAAM,QACN,QAAS,GACV,CACF,CAED,MAAO,CAOL,SAOA,SAQA,YAQA,SACD,CAED,MAAQ,CACN,MAAO,CAIL,uBAAwB,KACxB,eAAA,EAAA,eACD,EAGH,SAAU,CACR,YAAc,CACZ,MAAO,CACL,MAAO,KAAK,MACZ,UAAW,KAAK,UAChB,KAAM,KAAK,KACX,YAAa,KAAK,YAClB,KAAM,WACN,aAAc,KAAK,MACnB,gBAAiB,KAAK,SAAS,UAAU,CACzC,YAAa,KAAK,OAClB,gBAAiB,UACjB,wBAAyB,KAAK,aAC9B,gBAAiB,KAAK,OACvB,EAGH,WAAa,CACX,MAAO,CACL,KAAM,UACN,GAAI,KAAK,OAGT,MAAO,gBACP,aAAc,KAAK,MACpB,EAGH,uBAAyB,CACvB,OAAO,KAAK,mBAAqB,KAAK,WAGxC,iBAAmB,CACjB,OAAO,KAAK,aAAe,KAAK,iBAGlC,cAAgB,CACV,MAAC,KAAK,UAAY,KAAK,eAAiB,GAAK,KAAK,SAGtD,OAAO,KAAK,aAGd,cAAgB,CAEd,OADK,KAAK,YACH,KAAK,gBAAgB,CAAC,cAAc,IAAM,KAAK,YAAY,CADpC,IAGjC,CAED,MAAO,CACL,SAAU,EAAU,CAGb,KAAK,sBACR,KAAK,0BAA0B,CAC/B,KAAK,MAAM,SAAU,EAAS,EAG5B,CAAC,GAAY,KAAK,yBACpB,KAAK,uBAAuB,oBAAoB,YAAa,KAAK,iBAAiB,CACnF,KAAK,uBAAyB,OAIlC,SAAW,CACT,KAAK,cAAgB,CACnB,KAAK,0BAA0B,EAC/B,EAGJ,OAAQ,CACN,KAAM,GACN,UAAW,GACX,SAAW,CACT,KAAK,wBAAwB,EAEhC,CACF,CAED,SAAW,CACT,KAAK,wBAAwB,EAG/B,QAAS,CACP,iBAAkB,EAAG,CACnB,GAAI,KAAK,QAAS,OAElB,IAAM,EAAY,EAAE,OAAO,QAAQ,KAAK,CAEpC,GAAa,KAAK,cAAgB,EAAU,IAC9C,KAAK,eAAe,EAAU,GAAG,EAIrC,gBAAkB,CAChB,OAAO,KAAK,wBAA0B,KAAK,MAAM,aAAa,cAAc,IAAI,KAAK,SAAS,EAGhG,qBAAuB,CACjB,KAAK,UACP,KAAK,kBAAkB,GAAG,EAI9B,gBAAkB,CACZ,KAAK,SACT,KAAK,MAAM,YAAa,KAAK,eAAe,EAG9C,YAAc,CACR,KAAK,SAAW,KAAK,WAErB,KAAK,gBAAkB,IACzB,KAAK,MAAM,SAAU,KAAK,eAAe,CAErC,KAAK,eACP,KAAK,cAAc,OAAO,GAKhC,aAAe,CACb,KAAK,MAAM,SAAS,EAGtB,OAAQ,EAAM,EAAY,CACxB,KAAK,uBAAyB,EAC9B,KAAK,wBAAwB,iBAAiB,YAAa,KAAK,iBAAiB,CACjF,KAAK,MAAM,SAAU,EAAK,CAEtB,GACF,KAAK,0BAA0B,EAInC,gBAAiB,EAAG,EAAc,CAC5B,CAAC,KAAK,UAAY,CAAC,KAAK,gBAAgB,EAE5C,KAAK,GAAc,EAAE,EAGvB,0BAA4B,CACrB,KAAK,UACV,KAAK,cAAgB,CAGnB,KAAK,kBAAkB,KAAK,QAAU,GAAK,EAAE,EAC7C,EAGJ,wBAA0B,CACpB,KAAK,OAAO,eAEZ,KAAK,WAAa,CAAC,KAAK,mBAC1B,QAAQ,MAAM;sBACA,EAGnB,CACF,IApZQ,UAAQ,4BAA2B,gLAqCpC,MAAA,CA5CH,UAAO,mDAAW,EAAA,gBAAgB,EAAM,cAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,MAAA,CAAA,oDACnB,EAAA,gBAAgB,EAAM,aAAA,CAAA,CAAA,QAAA,CAAA,CAAA,CAAA,QAAA,CAAA,oDAClB,EAAA,gBAAgB,EAAM,UAAA,CAAA,CAAA,OAAA,UAAA,CAAA,CAAA,CAAA,KAAA,CAAA,oDACpB,EAAA,gBAAgB,EAAM,YAAA,CAAA,CAAA,OAAA,UAAA,CAAA,CAAA,CAAA,OAAA,CAAA,oDACtB,EAAA,gBAAgB,EAAM,YAAA,CAAA,CAAA,OAAA,UAAA,CAAA,CAAA,CAAA,OAAA,CAAA,oDACvB,EAAA,gBAAgB,EAAM,WAAA,CAAA,CAAA,OAAA,UAAA,CAAA,CAAA,CAAA,MAAA,CAAA,8BAQ3C,MANN,EAMM,EAAA,EAAA,EAAA,YADF,EAAA,OAAA,QAAA,CADC,WAAa,EAAA,WAAU,CAAA,CAAA,CAAA,CAKpB,EAAA,WAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBA2BF,MAAA,OA1BJ,IAAI,cACJ,UAAQ,2BACP,aAAU,EAAA,KAAA,EAAA,IAAA,GAAA,IAAE,EAAA,qBAAA,EAAA,oBAAA,GAAA,EAAmB,EAC/B,WAAQ,EAAA,KAAA,EAAA,IAAA,GAAA,IAAE,EAAA,qBAAA,EAAA,oBAAA,GAAA,EAAmB,yCACV,EAAA,kBAAA,EAAA,iBAAA,GAAA,EAAgB,IAG5B,EAAA,SAAO,CAAK,EAAA,sBAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAElB,GAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,YAAA,CAAA,IAAA,EAAA,CADQ,EAAA,UAAS,CAAA,CAAA,KAAA,GAAA,EAGN,EAAA,YAAc,EAAA,mBAAqB,EAAA,eAAe,EAAA,OAAO,cAAa,GAAA,CAAO,EAAA,sBAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAMpE,GAAA,EAAA,EAAA,YAAA,CAAA,IAAA,EAAA,CALZ,EAAA,UAAS,CAChB,QAAS,EAAA,kBACT,aAAY,EAAA,6CAEgB,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,gBAAA,CAAA,CAAA,qDAS7B,EAAA,OAAA,OAAA,OAHC,UAAY,EAAA,UACZ,OAAQ,EAAA,OACR,oBAAuB,EAAA"}

package/dist/{Combobox-By01ETlj.js → Combobox-D8nQeBIf.js}

@@ -1,19 +1,20 @@
 import { COMPONENT_SIZES as e } from "./common/constants/sizes.js";
-import { getUniqueString as t, hasSlotContent as n } from "./common/utils/index.js";
-import { t as r } from "./_plugin-vue_export-helper-BTgDAbhb.js";
-import i from "./common/mixins/keyboard-list-navigation.js";
-import a from "./lib/combobox/combobox-loading-list.js";
-import o from "./lib/combobox/combobox-empty-list.js";
-import { COMBOBOX_LABEL_SIZES as s } from "./lib/combobox/combobox-constants.js";
-import { createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, mergeProps as f, normalizeProps as p, openBlock as m, renderSlot as h, resolveComponent as g, withCtx as _, withKeys as v, withModifiers as y } from "vue";
+import { ordinalSizeValidator as t } from "./common/validators/index.js";
+import { getUniqueString as n, hasSlotContent as r } from "./common/utils/index.js";
+import { t as i } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import a from "./common/mixins/keyboard-list-navigation.js";
+import o from "./lib/combobox/combobox-loading-list.js";
+import s from "./lib/combobox/combobox-empty-list.js";
+import { COMBOBOX_LABEL_SIZES as c } from "./lib/combobox/combobox-constants.js";
+import { createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, mergeProps as p, normalizeProps as m, openBlock as h, renderSlot as g, resolveComponent as _, withCtx as v, withKeys as y, withModifiers as b } from "vue";
 //#region components/Combobox/Combobox.vue
-var b = {
+var x = {
 	name: "DtCombobox",
 	components: {
-		ComboboxLoadingList: a,
-		ComboboxEmptyList: o
+		ComboboxLoadingList: o,
+		ComboboxEmptyList: s
 	},
-	mixins: [i({
+	mixins: [a({
 		indexKey: "highlightIndex",
 		idKey: "highlightId",
 		listElementKey: "getListElement",
@@ -34,7 +35,7 @@ var b = {
 		size: {
 			type: [String, Number],
 			default: null,
-			validator: (t) => t === null || Object.values(s).includes(t) || Object.keys(e).includes(String(t))
+			validator: (n) => n === null || Object.values(c).includes(n) || t(e)(n)
 		},
 		description: {
 			type: String,
@@ -43,7 +44,7 @@ var b = {
 		listId: {
 			type: String,
 			default() {
-				return t();
+				return n();
 			}
 		},
 		onBeginningOfList: {
@@ -96,7 +97,7 @@ var b = {
 	data() {
 		return {
 			outsideRenderedListRef: null,
-			hasSlotContent: n
+			hasSlotContent: r
 		};
 	},
 	computed: {
@@ -192,38 +193,38 @@ var b = {
 			this.$slots.emptyListItem || this.emptyList && !this.emptyStateMessage && console.error("Invalid props: you must pass both props emptyList and emptyStateMessage to show the\n      empty message.");
 		}
 	}
-}, x = { "data-qa": "dt-combobox-input-wrapper" };
-function S(e, t, n, r, i, a) {
-	let o = g("combobox-loading-list"), s = g("combobox-empty-list");
-	return m(), u("div", { onKeydown: [
-		t[3] || (t[3] = v(y((e) => a.onKeyValidation(e, "onEscapeKey"), ["stop"]), ["esc"])),
-		t[4] || (t[4] = v(y((e) => a.onKeyValidation(e, "onEnterKey"), ["exact"]), ["enter"])),
-		t[5] || (t[5] = v(y((e) => a.onKeyValidation(e, "onUpKey"), ["stop", "prevent"]), ["up"])),
-		t[6] || (t[6] = v(y((e) => a.onKeyValidation(e, "onDownKey"), ["stop", "prevent"]), ["down"])),
-		t[7] || (t[7] = v(y((e) => a.onKeyValidation(e, "onHomeKey"), ["stop", "prevent"]), ["home"])),
-		t[8] || (t[8] = v(y((e) => a.onKeyValidation(e, "onEndKey"), ["stop", "prevent"]), ["end"]))
-	] }, [d("div", x, [h(e.$slots, "input", { inputProps: a.inputProps })]), n.showList ? (m(), u("div", {
+}, S = { "data-qa": "dt-combobox-input-wrapper" };
+function C(e, t, n, r, i, a) {
+	let o = _("combobox-loading-list"), s = _("combobox-empty-list");
+	return h(), d("div", { onKeydown: [
+		t[3] || (t[3] = y(b((e) => a.onKeyValidation(e, "onEscapeKey"), ["stop"]), ["esc"])),
+		t[4] || (t[4] = y(b((e) => a.onKeyValidation(e, "onEnterKey"), ["exact"]), ["enter"])),
+		t[5] || (t[5] = y(b((e) => a.onKeyValidation(e, "onUpKey"), ["stop", "prevent"]), ["up"])),
+		t[6] || (t[6] = y(b((e) => a.onKeyValidation(e, "onDownKey"), ["stop", "prevent"]), ["down"])),
+		t[7] || (t[7] = y(b((e) => a.onKeyValidation(e, "onHomeKey"), ["stop", "prevent"]), ["home"])),
+		t[8] || (t[8] = y(b((e) => a.onKeyValidation(e, "onEndKey"), ["stop", "prevent"]), ["end"]))
+	] }, [f("div", S, [g(e.$slots, "input", { inputProps: a.inputProps })]), n.showList ? (h(), d("div", {
 		key: 0,
 		ref: "listWrapper",
 		"data-qa": "dt-combobox-list-wrapper",
 		onMouseleave: t[0] || (t[0] = (...e) => a.clearHighlightIndex && a.clearHighlightIndex(...e)),
 		onFocusout: t[1] || (t[1] = (...e) => a.clearHighlightIndex && a.clearHighlightIndex(...e)),
 		onMousemoveCapture: t[2] || (t[2] = (...e) => a.onMouseHighlight && a.onMouseHighlight(...e))
-	}, [n.loading && !n.listRenderedOutside ? (m(), c(o, p(f({ key: 0 }, a.listProps)), null, 16)) : n.emptyList && (n.emptyStateMessage || i.hasSlotContent(e.$slots.emptyListItem)) && !n.listRenderedOutside ? (m(), c(s, f({ key: 1 }, a.listProps, {
+	}, [n.loading && !n.listRenderedOutside ? (h(), l(o, m(p({ key: 0 }, a.listProps)), null, 16)) : n.emptyList && (n.emptyStateMessage || i.hasSlotContent(e.$slots.emptyListItem)) && !n.listRenderedOutside ? (h(), l(s, p({ key: 1 }, a.listProps, {
 		message: n.emptyStateMessage,
 		"item-class": n.emptyStateClass
 	}), {
-		default: _(() => [h(e.$slots, "emptyListItem")]),
+		default: v(() => [g(e.$slots, "emptyListItem")]),
 		_: 3
-	}, 16, ["message", "item-class"])) : h(e.$slots, "list", {
+	}, 16, ["message", "item-class"])) : g(e.$slots, "list", {
 		key: 2,
 		listProps: a.listProps,
 		opened: a.onOpen,
 		clearHighlightIndex: a.clearHighlightIndex
-	})], 544)) : l("", !0)], 32);
+	})], 544)) : u("", !0)], 32);
 }
-var C = /* @__PURE__ */ r(b, [["render", S]]);
+var w = /* @__PURE__ */ i(x, [["render", C]]);
 //#endregion
-export { C as t };
+export { w as t };
 
-//# sourceMappingURL=Combobox-By01ETlj.js.map
+//# sourceMappingURL=Combobox-D8nQeBIf.js.map

package/dist/Combobox-D8nQeBIf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox-D8nQeBIf.js","names":[],"sources":["../components/Combobox/Combobox.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->\n<template>\n  <div\n    @keydown.esc.stop=\"onKeyValidation($event, 'onEscapeKey')\"\n    @keydown.enter.exact=\"onKeyValidation($event, 'onEnterKey')\"\n    @keydown.up.stop.prevent=\"onKeyValidation($event, 'onUpKey')\"\n    @keydown.down.stop.prevent=\"onKeyValidation($event, 'onDownKey')\"\n    @keydown.home.stop.prevent=\"onKeyValidation($event, 'onHomeKey')\"\n    @keydown.end.stop.prevent=\"onKeyValidation($event, 'onEndKey')\"\n  >\n    <div data-qa=\"dt-combobox-input-wrapper\">\n      <!-- @slot Slot for the combobox input element -->\n      <slot\n        name=\"input\"\n        :input-props=\"inputProps\"\n      />\n    </div>\n\n    <div\n      v-if=\"showList\"\n      ref=\"listWrapper\"\n      data-qa=\"dt-combobox-list-wrapper\"\n      @mouseleave=\"clearHighlightIndex\"\n      @focusout=\"clearHighlightIndex\"\n      @mousemove.capture=\"onMouseHighlight\"\n    >\n      <combobox-loading-list\n        v-if=\"loading && !listRenderedOutside\"\n        v-bind=\"listProps\"\n      />\n      <combobox-empty-list\n        v-else-if=\"emptyList && (emptyStateMessage || hasSlotContent($slots.emptyListItem)) && !listRenderedOutside\"\n        v-bind=\"listProps\"\n        :message=\"emptyStateMessage\"\n        :item-class=\"emptyStateClass\"\n      >\n        <slot name=\"emptyListItem\" />\n      </combobox-empty-list>\n      <!-- @slot Slot for the combobox list element -->\n      <slot\n        v-else\n        name=\"list\"\n        :list-props=\"listProps\"\n        :opened=\"onOpen\"\n        :clear-highlight-index=\"clearHighlightIndex\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nimport ComboboxLoadingList from './ComboboxLoadingList.vue';\nimport ComboboxEmptyList from './ComboboxEmptyList.vue';\nimport { DtKeyboardListNavigationMixin } from '@/common/mixins';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { COMBOBOX_LABEL_SIZES } from '@/components/Combobox';\nimport { COMPONENT_SIZES } from '@/common/constants';\nimport { ordinalSizeValidator } from '@/common/validators';\n\n/**\n * A combobox is a semantic component that displays an input element combined with a listbox,\n * which enables the user to select items from the list.\n * @see https://dialtone.dialpad.com/components/combobox.html\n */\nexport default {\n  name: 'DtCombobox',\n\n  components: {\n    ComboboxLoadingList,\n    ComboboxEmptyList,\n  },\n\n  mixins: [\n    DtKeyboardListNavigationMixin({\n      indexKey: 'highlightIndex',\n      idKey: 'highlightId',\n      listElementKey: 'getListElement',\n      afterHighlightMethod: 'afterHighlight',\n      beginningOfListMethod: 'beginningOfListMethod',\n      endOfListMethod: 'endOfListMethod',\n      activeItemKey: 'activeItemEl',\n    }),\n  ],\n\n  props: {\n    /**\n     * String to use for the input label.\n     */\n    label: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines visibility of input label.\n     * @values true, false\n     */\n    showLabel: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Size of the input.\n     * @values 100, 200, 300, 400, 500\n     */\n    size: {\n      type: [String, Number],\n      default: null,\n      validator: (t) => t === null\n        || Object.values(COMBOBOX_LABEL_SIZES).includes(t)\n        || ordinalSizeValidator(COMPONENT_SIZES)(t),\n    },\n\n    /**\n     * Description for the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Sets an ID on the list element of the component. Used by several aria attributes\n     * as well as when deriving the IDs for each item.\n     */\n    listId: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * A method that will be called when the selection goes past the beginning of the list.\n     */\n    onBeginningOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * A method that will be called when the selection goes past the end of the list.\n     */\n    onEndOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * Determines when to show the list element and also controls the aria-expanded attribute.\n     * @values true, false\n     */\n    showList: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If the list is rendered outside the component, like when using popover as the list wrapper.\n     * @values true, false\n     */\n    listRenderedOutside: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines when to show the skeletons and also controls aria-busy attribute.\n     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Sets the list to an empty state, and displays the message from prop `emptyStateMessage`.\n     * @values true, false\n     */\n    emptyList: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Message to show when the list is empty\n     */\n    emptyStateMessage: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the empty list element.\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    emptyStateClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Programmatically click on the active list item element when a selection\n     * comes from keyboard navigation, i.e. pressing the \"Enter\" key.\n     * @values true, false\n     */\n    clickOnSelect: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired when item selected\n     *\n     * @event select\n     * @type {Number}\n     */\n    'select',\n\n    /**\n     * Event fired when pressing escape\n     *\n     * @event escape\n     */\n    'escape',\n\n    /**\n     * Event fired when the highlight changes\n     *\n     * @event highlight\n     * @type {Number}\n     */\n    'highlight',\n\n    /**\n     * Event fired when list is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      // If the list is rendered at the root, rather than as a child\n      // of this component, this is the ref to that dom element. Set\n      // by the onOpen method.\n      outsideRenderedListRef: null,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    inputProps () {\n      return {\n        label: this.label,\n        showLabel: this.showLabel,\n        size: this.size,\n        description: this.description,\n        role: 'combobox',\n        'aria-label': this.label,\n        'aria-expanded': this.showList.toString(),\n        'aria-owns': this.listId,\n        'aria-haspopup': 'listbox',\n        'aria-activedescendant': this.activeItemId,\n        'aria-controls': this.listId,\n      };\n    },\n\n    listProps () {\n      return {\n        role: 'listbox',\n        id: this.listId,\n        // The list has to be positioned relatively so that the auto-scroll can\n        // calculate the correct offset for the list items.\n        class: 'd-ps-relative',\n        'aria-label': this.label,\n      };\n    },\n\n    beginningOfListMethod () {\n      return this.onBeginningOfList || this.jumpToEnd;\n    },\n\n    endOfListMethod () {\n      return this.onEndOfList || this.jumpToBeginning;\n    },\n\n    activeItemId () {\n      if (!this.showList || this.highlightIndex < 0 || this.loading) {\n        return;\n      }\n      return this.highlightId;\n    },\n\n    activeItemEl () {\n      if (!this.highlightId) return '';\n      return this.getListElement().querySelector('#' + this.highlightId);\n    },\n  },\n\n  watch: {\n    showList (showList) {\n      // When the list's visibility changes reset the highlight index.\n\n      if (!this.listRenderedOutside) {\n        this.setInitialHighlightIndex();\n        this.$emit('opened', showList);\n      }\n\n      if (!showList && this.outsideRenderedListRef) {\n        this.outsideRenderedListRef.removeEventListener('mousemove', this.onMouseHighlight);\n        this.outsideRenderedListRef = null;\n      }\n    },\n\n    loading () {\n      this.$nextTick(() => {\n        this.setInitialHighlightIndex();\n      });\n    },\n\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        this.validateEmptyListProps();\n      },\n    },\n  },\n\n  created () {\n    this.validateEmptyListProps();\n  },\n\n  methods: {\n    onMouseHighlight (e) {\n      if (this.loading) return;\n\n      const liElement = e.target.closest('li');\n\n      if (liElement && this.highlightId !== liElement.id) {\n        this.setHighlightId(liElement.id);\n      }\n    },\n\n    getListElement () {\n      return this.outsideRenderedListRef ?? this.$refs.listWrapper?.querySelector(`#${this.listId}`);\n    },\n\n    clearHighlightIndex () {\n      if (this.showList) {\n        this.setHighlightIndex(-1);\n      }\n    },\n\n    afterHighlight () {\n      if (this.loading) return;\n      this.$emit('highlight', this.highlightIndex);\n    },\n\n    onEnterKey () {\n      if (this.loading || this.emptyList) return;\n\n      if (this.highlightIndex >= 0) {\n        this.$emit('select', this.highlightIndex);\n\n        if (this.clickOnSelect) {\n          this.activeItemEl?.click();\n        }\n      }\n    },\n\n    onEscapeKey () {\n      this.$emit('escape');\n    },\n\n    onOpen (open, contentRef) {\n      this.outsideRenderedListRef = contentRef;\n      this.outsideRenderedListRef?.addEventListener('mousemove', this.onMouseHighlight);\n      this.$emit('opened', open);\n\n      if (open) {\n        this.setInitialHighlightIndex();\n      }\n    },\n\n    onKeyValidation (e, eventHandler) {\n      if (!this.showList || !this.getListElement()) return;\n\n      this[eventHandler](e);\n    },\n\n    setInitialHighlightIndex () {\n      if (!this.showList) return;\n      this.$nextTick(() => {\n      // When the list's is shown, reset the highlight index.\n      // If the list is loading, set to -1\n        this.setHighlightIndex(this.loading ? -1 : 0);\n      });\n    },\n\n    validateEmptyListProps () {\n      if (this.$slots.emptyListItem) { return; }\n\n      if (this.emptyList && !this.emptyStateMessage) {\n        console.error(`Invalid props: you must pass both props emptyList and emptyStateMessage to show the\n      empty message.`);\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}

package/dist/TextList-B6XFfQfD.js

@@ -0,0 +1,88 @@
+import { DT_TEXT_LIST_CONTEXT as e, DT_TEXT_LIST_DEFAULT_TYPE as t, DT_TEXT_LIST_ORDERED_MARKERS as n, DT_TEXT_LIST_UNORDERED_MARKERS as r } from "./lib/text-list/text-list-constants.js";
+import { textListGapValidator as i, textListMarkerToneValidator as a, textListMarkerValidator as o, textListTypeValidator as s } from "./lib/text-list/validators.js";
+import { computed as c, createBlock as l, defineComponent as u, normalizeClass as d, onMounted as f, openBlock as p, provide as m, ref as h, renderSlot as g, resolveDynamicComponent as _, toRef as v, withCtx as y } from "vue";
+//#endregion
+//#region components/TextList/TextList.vue
+var b = /* @__PURE__ */ u({
+	name: "DtTextList",
+	__name: "TextList",
+	props: {
+		type: {
+			type: String,
+			default: t,
+			validator: s
+		},
+		marker: {
+			type: String,
+			default: void 0,
+			validator: o
+		},
+		markerTone: {
+			type: String,
+			default: void 0,
+			validator: a
+		},
+		gap: {
+			type: String,
+			default: void 0,
+			validator: i
+		},
+		start: {
+			type: Number,
+			default: void 0
+		},
+		reversed: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(t) {
+		let i = t, a = h(null);
+		m(e, { type: v(i, "type") });
+		let o = c(() => i.type === "ordered"), s = c(() => o.value ? "ol" : "ul"), u = c(() => i.marker === "none" ? "list" : void 0), b = c(() => o.value ? i.start : void 0), x = c(() => o.value && i.reversed ? !0 : void 0), S = c(() => [
+			"d-text-list",
+			i.gap ? `d-text-list--gap-${i.gap}` : null,
+			{ "d-text-list--ordered": o.value },
+			i.marker ? `d-text-list--marker-${i.marker}` : null,
+			i.markerTone ? `d-text-list--marker-tone-${i.markerTone}` : null
+		]), C = (e) => console.warn(`[DtTextList] ${e}`);
+		function w() {
+			o.value || (i.start !== void 0 && C("The start prop only applies when type=\"ordered\"."), i.reversed && C("The reversed prop only applies when type=\"ordered\"."));
+		}
+		function T() {
+			!i.marker || i.marker === "none" || (i.type === "ordered" && r.includes(i.marker) && C(`The marker="${i.marker}" value is usually used with type="unordered".`), i.type === "unordered" && n.includes(i.marker) && C(`The marker="${i.marker}" value is usually used with type="ordered".`));
+		}
+		function E() {
+			let e = a.value?.$el ?? a.value;
+			if (e) {
+				for (let t of e.children) if (t.tagName !== "LI") {
+					C("Use DtTextListItem or a native li as the direct child of DtTextList.");
+					break;
+				}
+			}
+		}
+		return f(() => {
+			process.env.NODE_ENV !== "production" && (w(), T(), E());
+		}), (e, t) => (p(), l(_(s.value), {
+			ref_key: "listRef",
+			ref: a,
+			"data-qa": "dt-text-list",
+			class: d(S.value),
+			role: u.value,
+			start: b.value,
+			reversed: x.value
+		}, {
+			default: y(() => [g(e.$slots, "default")]),
+			_: 3
+		}, 8, [
+			"class",
+			"role",
+			"start",
+			"reversed"
+		]));
+	}
+});
+//#endregion
+export { b as t };
+
+//# sourceMappingURL=TextList-B6XFfQfD.js.map

package/dist/TextList-B6XFfQfD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextList-B6XFfQfD.js","names":[],"sources":["../components/TextList/TextList.vue","../components/TextList/TextList.vue"],"sourcesContent":["<!-- eslint-disable vue/no-restricted-class -->\n<template>\n  <component\n    :is=\"listElement\"\n    ref=\"listRef\"\n    data-qa=\"dt-text-list\"\n    :class=\"textListClasses\"\n    :role=\"role\"\n    :start=\"orderedStart\"\n    :reversed=\"orderedReversed\"\n  >\n    <!-- @slot Text list items. Use DtTextListItem as the direct child. -->\n    <slot />\n  </component>\n</template>\n\n<script setup lang=\"ts\">\n// @ts-nocheck\nimport {\n  computed,\n  onMounted,\n  provide,\n  ref,\n  toRef,\n} from 'vue';\nimport {\n  DT_TEXT_LIST_CONTEXT,\n  DT_TEXT_LIST_DEFAULT_TYPE,\n  DT_TEXT_LIST_ORDERED_MARKERS,\n  DT_TEXT_LIST_UNORDERED_MARKERS,\n} from './TextListConstants';\nimport {\n  textListGapValidator,\n  textListMarkerToneValidator,\n  textListMarkerValidator,\n  textListTypeValidator,\n} from './Validators';\n\ndefineOptions({\n  name: 'DtTextList',\n});\n\nconst props = defineProps({\n  /**\n   * Semantic list type. Sets the rendered element to `ul` or `ol`.\n   * @values unordered, ordered\n   */\n  type: {\n    type: String,\n    default: DT_TEXT_LIST_DEFAULT_TYPE,\n    validator: textListTypeValidator,\n  },\n\n  /**\n   * Visual marker style. Leave unset for automatic depth-aware markers.\n   * @values disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman, none\n   */\n  marker: {\n    type: String,\n    default: undefined,\n    validator: textListMarkerValidator,\n  },\n\n  /**\n   * Marker foreground tone. Uses the same tone vocabulary as DtText.\n   * @values primary, secondary, tertiary, muted, disabled, placeholder, critical, critical-strong, positive, positive-strong, warning, info, info-strong, neutral-black, neutral-white\n   */\n  markerTone: {\n    type: String,\n    default: undefined,\n    validator: textListMarkerToneValidator,\n  },\n\n  /**\n   * Space between list items and before nested lists.\n   * @values 0, 1, 25, 50, 75, 100, 125, 150, 175, 200, 250, 300, 350, 400\n   */\n  gap: {\n    type: String,\n    default: undefined,\n    validator: textListGapValidator,\n  },\n\n  /**\n   * Starting number for ordered lists.\n   */\n  start: {\n    type: Number,\n    default: undefined,\n  },\n\n  /**\n   * Reverse ordered list numbering.\n   */\n  reversed: {\n    type: Boolean,\n    default: false,\n  },\n});\n\nconst listRef = ref(null);\n\nprovide(DT_TEXT_LIST_CONTEXT, {\n  type: toRef(props, 'type'),\n});\n\nconst isOrdered = computed(() => props.type === 'ordered');\nconst listElement = computed(() => isOrdered.value ? 'ol' : 'ul');\n// Safari drops list semantics when list-style is none; restore them explicitly.\nconst role = computed(() => props.marker === 'none' ? 'list' : undefined);\nconst orderedStart = computed(() => isOrdered.value ? props.start : undefined);\nconst orderedReversed = computed(() => isOrdered.value && props.reversed ? true : undefined);\n\nconst textListClasses = computed(() => [\n  'd-text-list',\n  props.gap ? `d-text-list--gap-${props.gap}` : null,\n  {\n    'd-text-list--ordered': isOrdered.value,\n  },\n  props.marker ? `d-text-list--marker-${props.marker}` : null,\n  props.markerTone ? `d-text-list--marker-tone-${props.markerTone}` : null,\n]);\n\n// eslint-disable-next-line no-console\nconst warn = message => console.warn(`[DtTextList] ${message}`);\n\nfunction validateOrderedOnlyProps () {\n  if (isOrdered.value) return;\n\n  if (props.start !== undefined) {\n    warn('The start prop only applies when type=\"ordered\".');\n  }\n\n  if (props.reversed) {\n    warn('The reversed prop only applies when type=\"ordered\".');\n  }\n}\n\nfunction validateMarkerFamily () {\n  if (!props.marker || props.marker === 'none') return;\n\n  if (props.type === 'ordered' && DT_TEXT_LIST_UNORDERED_MARKERS.includes(props.marker)) {\n    warn(`The marker=\"${props.marker}\" value is usually used with type=\"unordered\".`);\n  }\n\n  if (props.type === 'unordered' && DT_TEXT_LIST_ORDERED_MARKERS.includes(props.marker)) {\n    warn(`The marker=\"${props.marker}\" value is usually used with type=\"ordered\".`);\n  }\n}\n\nfunction validateChildren () {\n  const rootElement = listRef.value?.$el ?? listRef.value;\n  if (!rootElement) return;\n\n  for (const child of rootElement.children) {\n    if (child.tagName === 'LI') continue;\n\n    warn('Use DtTextListItem or a native li as the direct child of DtTextList.');\n    break;\n  }\n}\n\nonMounted(() => {\n  if (process.env.NODE_ENV !== 'production') {\n    validateOrderedOnlyProps();\n    validateMarkerFamily();\n    validateChildren();\n  }\n});\n</script>\n","<!-- eslint-disable vue/no-restricted-class -->\n<template>\n  <component\n    :is=\"listElement\"\n    ref=\"listRef\"\n    data-qa=\"dt-text-list\"\n    :class=\"textListClasses\"\n    :role=\"role\"\n    :start=\"orderedStart\"\n    :reversed=\"orderedReversed\"\n  >\n    <!-- @slot Text list items. Use DtTextListItem as the direct child. -->\n    <slot />\n  </component>\n</template>\n\n<script setup lang=\"ts\">\n// @ts-nocheck\nimport {\n  computed,\n  onMounted,\n  provide,\n  ref,\n  toRef,\n} from 'vue';\nimport {\n  DT_TEXT_LIST_CONTEXT,\n  DT_TEXT_LIST_DEFAULT_TYPE,\n  DT_TEXT_LIST_ORDERED_MARKERS,\n  DT_TEXT_LIST_UNORDERED_MARKERS,\n} from './TextListConstants';\nimport {\n  textListGapValidator,\n  textListMarkerToneValidator,\n  textListMarkerValidator,\n  textListTypeValidator,\n} from './Validators';\n\ndefineOptions({\n  name: 'DtTextList',\n});\n\nconst props = defineProps({\n  /**\n   * Semantic list type. Sets the rendered element to `ul` or `ol`.\n   * @values unordered, ordered\n   */\n  type: {\n    type: String,\n    default: DT_TEXT_LIST_DEFAULT_TYPE,\n    validator: textListTypeValidator,\n  },\n\n  /**\n   * Visual marker style. Leave unset for automatic depth-aware markers.\n   * @values disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman, none\n   */\n  marker: {\n    type: String,\n    default: undefined,\n    validator: textListMarkerValidator,\n  },\n\n  /**\n   * Marker foreground tone. Uses the same tone vocabulary as DtText.\n   * @values primary, secondary, tertiary, muted, disabled, placeholder, critical, critical-strong, positive, positive-strong, warning, info, info-strong, neutral-black, neutral-white\n   */\n  markerTone: {\n    type: String,\n    default: undefined,\n    validator: textListMarkerToneValidator,\n  },\n\n  /**\n   * Space between list items and before nested lists.\n   * @values 0, 1, 25, 50, 75, 100, 125, 150, 175, 200, 250, 300, 350, 400\n   */\n  gap: {\n    type: String,\n    default: undefined,\n    validator: textListGapValidator,\n  },\n\n  /**\n   * Starting number for ordered lists.\n   */\n  start: {\n    type: Number,\n    default: undefined,\n  },\n\n  /**\n   * Reverse ordered list numbering.\n   */\n  reversed: {\n    type: Boolean,\n    default: false,\n  },\n});\n\nconst listRef = ref(null);\n\nprovide(DT_TEXT_LIST_CONTEXT, {\n  type: toRef(props, 'type'),\n});\n\nconst isOrdered = computed(() => props.type === 'ordered');\nconst listElement = computed(() => isOrdered.value ? 'ol' : 'ul');\n// Safari drops list semantics when list-style is none; restore them explicitly.\nconst role = computed(() => props.marker === 'none' ? 'list' : undefined);\nconst orderedStart = computed(() => isOrdered.value ? props.start : undefined);\nconst orderedReversed = computed(() => isOrdered.value && props.reversed ? true : undefined);\n\nconst textListClasses = computed(() => [\n  'd-text-list',\n  props.gap ? `d-text-list--gap-${props.gap}` : null,\n  {\n    'd-text-list--ordered': isOrdered.value,\n  },\n  props.marker ? `d-text-list--marker-${props.marker}` : null,\n  props.markerTone ? `d-text-list--marker-tone-${props.markerTone}` : null,\n]);\n\n// eslint-disable-next-line no-console\nconst warn = message => console.warn(`[DtTextList] ${message}`);\n\nfunction validateOrderedOnlyProps () {\n  if (isOrdered.value) return;\n\n  if (props.start !== undefined) {\n    warn('The start prop only applies when type=\"ordered\".');\n  }\n\n  if (props.reversed) {\n    warn('The reversed prop only applies when type=\"ordered\".');\n  }\n}\n\nfunction validateMarkerFamily () {\n  if (!props.marker || props.marker === 'none') return;\n\n  if (props.type === 'ordered' && DT_TEXT_LIST_UNORDERED_MARKERS.includes(props.marker)) {\n    warn(`The marker=\"${props.marker}\" value is usually used with type=\"unordered\".`);\n  }\n\n  if (props.type === 'unordered' && DT_TEXT_LIST_ORDERED_MARKERS.includes(props.marker)) {\n    warn(`The marker=\"${props.marker}\" value is usually used with type=\"ordered\".`);\n  }\n}\n\nfunction validateChildren () {\n  const rootElement = listRef.value?.$el ?? listRef.value;\n  if (!rootElement) return;\n\n  for (const child of rootElement.children) {\n    if (child.tagName === 'LI') continue;\n\n    warn('Use DtTextListItem or a native li as the direct child of DtTextList.');\n    break;\n  }\n}\n\nonMounted(() => {\n  if (process.env.NODE_ENV !== 'production') {\n    validateOrderedOnlyProps();\n    validateMarkerFamily();\n    validateChildren();\n  }\n});\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0CA,IAAM,IAAQ,GA0DR,IAAU,EAAI,KAAK;AAEzB,IAAQ,GAAsB,EAC5B,MAAM,EAAM,GAAO,OAAO,EAC3B,CAAC;EAEF,IAAM,IAAY,QAAe,EAAM,SAAS,UAAU,EACpD,IAAc,QAAe,EAAU,QAAQ,OAAO,KAAK,EAE3D,IAAO,QAAe,EAAM,WAAW,SAAS,SAAS,KAAA,EAAU,EACnE,IAAe,QAAe,EAAU,QAAQ,EAAM,QAAQ,KAAA,EAAU,EACxE,IAAkB,QAAe,EAAU,SAAS,EAAM,WAAW,KAAO,KAAA,EAAU,EAEtF,IAAkB,QAAe;GACrC;GACA,EAAM,MAAM,oBAAoB,EAAM,QAAQ;GAC9C,EACE,wBAAwB,EAAU,OACnC;GACD,EAAM,SAAS,uBAAuB,EAAM,WAAW;GACvD,EAAM,aAAa,4BAA4B,EAAM,eAAe;GACrE,CAAC,EAGI,KAAO,MAAW,QAAQ,KAAK,gBAAgB,IAAU;EAE/D,SAAS,IAA4B;AAC/B,KAAU,UAEV,EAAM,UAAU,KAAA,KAClB,EAAK,qDAAmD,EAGtD,EAAM,YACR,EAAK,wDAAsD;;EAI/D,SAAS,IAAwB;AAC3B,IAAC,EAAM,UAAU,EAAM,WAAW,WAElC,EAAM,SAAS,aAAa,EAA+B,SAAS,EAAM,OAAO,IACnF,EAAK,eAAe,EAAM,OAAO,gDAAgD,EAG/E,EAAM,SAAS,eAAe,EAA6B,SAAS,EAAM,OAAO,IACnF,EAAK,eAAe,EAAM,OAAO,8CAA8C;;EAInF,SAAS,IAAoB;GAC3B,IAAM,IAAc,EAAQ,OAAO,OAAO,EAAQ;AAC7C,UAEL;SAAK,IAAM,KAAS,EAAY,SAC1B,OAAM,YAAY,MAEtB;OAAK,uEAAuE;AAC5E;;;;SAIJ,QAAgB;AACd,GAAA,QAAA,IAAA,aAA6B,iBAC3B,GAA0B,EAC1B,GAAsB,EACtB,GAAkB;IAEpB,kBAtKA,EAWY,EAVL,EAAA,MAAW,EAAA;YACZ;GAAJ,KAAI;GACJ,WAAQ;GACP,OAAK,EAAE,EAAA,MAAe;GACtB,MAAM,EAAA;GACN,OAAO,EAAA;GACP,UAAU,EAAA;;oBAGH,CAAR,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/TextList-Dd-ROFiI.cjs

@@ -0,0 +1,2 @@
+require(`./chunk-Bmb41Sf3.cjs`);const e=require(`./lib/text-list/text-list-constants.cjs`),t=require(`./lib/text-list/validators.cjs`);let n=require(`vue`);var r=(0,n.defineComponent)({name:`DtTextList`,__name:`TextList`,props:{type:{type:String,default:e.DT_TEXT_LIST_DEFAULT_TYPE,validator:t.textListTypeValidator},marker:{type:String,default:void 0,validator:t.textListMarkerValidator},markerTone:{type:String,default:void 0,validator:t.textListMarkerToneValidator},gap:{type:String,default:void 0,validator:t.textListGapValidator},start:{type:Number,default:void 0},reversed:{type:Boolean,default:!1}},setup(t){let r=t,i=(0,n.ref)(null);(0,n.provide)(e.DT_TEXT_LIST_CONTEXT,{type:(0,n.toRef)(r,`type`)});let a=(0,n.computed)(()=>r.type===`ordered`),o=(0,n.computed)(()=>a.value?`ol`:`ul`),s=(0,n.computed)(()=>r.marker===`none`?`list`:void 0),c=(0,n.computed)(()=>a.value?r.start:void 0),l=(0,n.computed)(()=>a.value&&r.reversed?!0:void 0),u=(0,n.computed)(()=>[`d-text-list`,r.gap?`d-text-list--gap-${r.gap}`:null,{"d-text-list--ordered":a.value},r.marker?`d-text-list--marker-${r.marker}`:null,r.markerTone?`d-text-list--marker-tone-${r.markerTone}`:null]),d=e=>console.warn(`[DtTextList] ${e}`);function f(){a.value||(r.start!==void 0&&d(`The start prop only applies when type="ordered".`),r.reversed&&d(`The reversed prop only applies when type="ordered".`))}function p(){!r.marker||r.marker===`none`||(r.type===`ordered`&&e.DT_TEXT_LIST_UNORDERED_MARKERS.includes(r.marker)&&d(`The marker="${r.marker}" value is usually used with type="unordered".`),r.type===`unordered`&&e.DT_TEXT_LIST_ORDERED_MARKERS.includes(r.marker)&&d(`The marker="${r.marker}" value is usually used with type="ordered".`))}function m(){let e=i.value?.$el??i.value;if(e){for(let t of e.children)if(t.tagName!==`LI`){d(`Use DtTextListItem or a native li as the direct child of DtTextList.`);break}}}return(0,n.onMounted)(()=>{process.env.NODE_ENV!==`production`&&(f(),p(),m())}),(e,t)=>((0,n.openBlock)(),(0,n.createBlock)((0,n.resolveDynamicComponent)(o.value),{ref_key:`listRef`,ref:i,"data-qa":`dt-text-list`,class:(0,n.normalizeClass)(u.value),role:s.value,start:c.value,reversed:l.value},{default:(0,n.withCtx)(()=>[(0,n.renderSlot)(e.$slots,`default`)]),_:3},8,[`class`,`role`,`start`,`reversed`]))}});Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return r}});
+//# sourceMappingURL=TextList-Dd-ROFiI.cjs.map

package/dist/TextList-Dd-ROFiI.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextList-Dd-ROFiI.cjs","names":[],"sources":["../components/TextList/TextList.vue","../components/TextList/TextList.vue"],"sourcesContent":["<!-- eslint-disable vue/no-restricted-class -->\n<template>\n  <component\n    :is=\"listElement\"\n    ref=\"listRef\"\n    data-qa=\"dt-text-list\"\n    :class=\"textListClasses\"\n    :role=\"role\"\n    :start=\"orderedStart\"\n    :reversed=\"orderedReversed\"\n  >\n    <!-- @slot Text list items. Use DtTextListItem as the direct child. -->\n    <slot />\n  </component>\n</template>\n\n<script setup lang=\"ts\">\n// @ts-nocheck\nimport {\n  computed,\n  onMounted,\n  provide,\n  ref,\n  toRef,\n} from 'vue';\nimport {\n  DT_TEXT_LIST_CONTEXT,\n  DT_TEXT_LIST_DEFAULT_TYPE,\n  DT_TEXT_LIST_ORDERED_MARKERS,\n  DT_TEXT_LIST_UNORDERED_MARKERS,\n} from './TextListConstants';\nimport {\n  textListGapValidator,\n  textListMarkerToneValidator,\n  textListMarkerValidator,\n  textListTypeValidator,\n} from './Validators';\n\ndefineOptions({\n  name: 'DtTextList',\n});\n\nconst props = defineProps({\n  /**\n   * Semantic list type. Sets the rendered element to `ul` or `ol`.\n   * @values unordered, ordered\n   */\n  type: {\n    type: String,\n    default: DT_TEXT_LIST_DEFAULT_TYPE,\n    validator: textListTypeValidator,\n  },\n\n  /**\n   * Visual marker style. Leave unset for automatic depth-aware markers.\n   * @values disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman, none\n   */\n  marker: {\n    type: String,\n    default: undefined,\n    validator: textListMarkerValidator,\n  },\n\n  /**\n   * Marker foreground tone. Uses the same tone vocabulary as DtText.\n   * @values primary, secondary, tertiary, muted, disabled, placeholder, critical, critical-strong, positive, positive-strong, warning, info, info-strong, neutral-black, neutral-white\n   */\n  markerTone: {\n    type: String,\n    default: undefined,\n    validator: textListMarkerToneValidator,\n  },\n\n  /**\n   * Space between list items and before nested lists.\n   * @values 0, 1, 25, 50, 75, 100, 125, 150, 175, 200, 250, 300, 350, 400\n   */\n  gap: {\n    type: String,\n    default: undefined,\n    validator: textListGapValidator,\n  },\n\n  /**\n   * Starting number for ordered lists.\n   */\n  start: {\n    type: Number,\n    default: undefined,\n  },\n\n  /**\n   * Reverse ordered list numbering.\n   */\n  reversed: {\n    type: Boolean,\n    default: false,\n  },\n});\n\nconst listRef = ref(null);\n\nprovide(DT_TEXT_LIST_CONTEXT, {\n  type: toRef(props, 'type'),\n});\n\nconst isOrdered = computed(() => props.type === 'ordered');\nconst listElement = computed(() => isOrdered.value ? 'ol' : 'ul');\n// Safari drops list semantics when list-style is none; restore them explicitly.\nconst role = computed(() => props.marker === 'none' ? 'list' : undefined);\nconst orderedStart = computed(() => isOrdered.value ? props.start : undefined);\nconst orderedReversed = computed(() => isOrdered.value && props.reversed ? true : undefined);\n\nconst textListClasses = computed(() => [\n  'd-text-list',\n  props.gap ? `d-text-list--gap-${props.gap}` : null,\n  {\n    'd-text-list--ordered': isOrdered.value,\n  },\n  props.marker ? `d-text-list--marker-${props.marker}` : null,\n  props.markerTone ? `d-text-list--marker-tone-${props.markerTone}` : null,\n]);\n\n// eslint-disable-next-line no-console\nconst warn = message => console.warn(`[DtTextList] ${message}`);\n\nfunction validateOrderedOnlyProps () {\n  if (isOrdered.value) return;\n\n  if (props.start !== undefined) {\n    warn('The start prop only applies when type=\"ordered\".');\n  }\n\n  if (props.reversed) {\n    warn('The reversed prop only applies when type=\"ordered\".');\n  }\n}\n\nfunction validateMarkerFamily () {\n  if (!props.marker || props.marker === 'none') return;\n\n  if (props.type === 'ordered' && DT_TEXT_LIST_UNORDERED_MARKERS.includes(props.marker)) {\n    warn(`The marker=\"${props.marker}\" value is usually used with type=\"unordered\".`);\n  }\n\n  if (props.type === 'unordered' && DT_TEXT_LIST_ORDERED_MARKERS.includes(props.marker)) {\n    warn(`The marker=\"${props.marker}\" value is usually used with type=\"ordered\".`);\n  }\n}\n\nfunction validateChildren () {\n  const rootElement = listRef.value?.$el ?? listRef.value;\n  if (!rootElement) return;\n\n  for (const child of rootElement.children) {\n    if (child.tagName === 'LI') continue;\n\n    warn('Use DtTextListItem or a native li as the direct child of DtTextList.');\n    break;\n  }\n}\n\nonMounted(() => {\n  if (process.env.NODE_ENV !== 'production') {\n    validateOrderedOnlyProps();\n    validateMarkerFamily();\n    validateChildren();\n  }\n});\n</script>\n","<!-- eslint-disable vue/no-restricted-class -->\n<template>\n  <component\n    :is=\"listElement\"\n    ref=\"listRef\"\n    data-qa=\"dt-text-list\"\n    :class=\"textListClasses\"\n    :role=\"role\"\n    :start=\"orderedStart\"\n    :reversed=\"orderedReversed\"\n  >\n    <!-- @slot Text list items. Use DtTextListItem as the direct child. -->\n    <slot />\n  </component>\n</template>\n\n<script setup lang=\"ts\">\n// @ts-nocheck\nimport {\n  computed,\n  onMounted,\n  provide,\n  ref,\n  toRef,\n} from 'vue';\nimport {\n  DT_TEXT_LIST_CONTEXT,\n  DT_TEXT_LIST_DEFAULT_TYPE,\n  DT_TEXT_LIST_ORDERED_MARKERS,\n  DT_TEXT_LIST_UNORDERED_MARKERS,\n} from './TextListConstants';\nimport {\n  textListGapValidator,\n  textListMarkerToneValidator,\n  textListMarkerValidator,\n  textListTypeValidator,\n} from './Validators';\n\ndefineOptions({\n  name: 'DtTextList',\n});\n\nconst props = defineProps({\n  /**\n   * Semantic list type. Sets the rendered element to `ul` or `ol`.\n   * @values unordered, ordered\n   */\n  type: {\n    type: String,\n    default: DT_TEXT_LIST_DEFAULT_TYPE,\n    validator: textListTypeValidator,\n  },\n\n  /**\n   * Visual marker style. Leave unset for automatic depth-aware markers.\n   * @values disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman, none\n   */\n  marker: {\n    type: String,\n    default: undefined,\n    validator: textListMarkerValidator,\n  },\n\n  /**\n   * Marker foreground tone. Uses the same tone vocabulary as DtText.\n   * @values primary, secondary, tertiary, muted, disabled, placeholder, critical, critical-strong, positive, positive-strong, warning, info, info-strong, neutral-black, neutral-white\n   */\n  markerTone: {\n    type: String,\n    default: undefined,\n    validator: textListMarkerToneValidator,\n  },\n\n  /**\n   * Space between list items and before nested lists.\n   * @values 0, 1, 25, 50, 75, 100, 125, 150, 175, 200, 250, 300, 350, 400\n   */\n  gap: {\n    type: String,\n    default: undefined,\n    validator: textListGapValidator,\n  },\n\n  /**\n   * Starting number for ordered lists.\n   */\n  start: {\n    type: Number,\n    default: undefined,\n  },\n\n  /**\n   * Reverse ordered list numbering.\n   */\n  reversed: {\n    type: Boolean,\n    default: false,\n  },\n});\n\nconst listRef = ref(null);\n\nprovide(DT_TEXT_LIST_CONTEXT, {\n  type: toRef(props, 'type'),\n});\n\nconst isOrdered = computed(() => props.type === 'ordered');\nconst listElement = computed(() => isOrdered.value ? 'ol' : 'ul');\n// Safari drops list semantics when list-style is none; restore them explicitly.\nconst role = computed(() => props.marker === 'none' ? 'list' : undefined);\nconst orderedStart = computed(() => isOrdered.value ? props.start : undefined);\nconst orderedReversed = computed(() => isOrdered.value && props.reversed ? true : undefined);\n\nconst textListClasses = computed(() => [\n  'd-text-list',\n  props.gap ? `d-text-list--gap-${props.gap}` : null,\n  {\n    'd-text-list--ordered': isOrdered.value,\n  },\n  props.marker ? `d-text-list--marker-${props.marker}` : null,\n  props.markerTone ? `d-text-list--marker-tone-${props.markerTone}` : null,\n]);\n\n// eslint-disable-next-line no-console\nconst warn = message => console.warn(`[DtTextList] ${message}`);\n\nfunction validateOrderedOnlyProps () {\n  if (isOrdered.value) return;\n\n  if (props.start !== undefined) {\n    warn('The start prop only applies when type=\"ordered\".');\n  }\n\n  if (props.reversed) {\n    warn('The reversed prop only applies when type=\"ordered\".');\n  }\n}\n\nfunction validateMarkerFamily () {\n  if (!props.marker || props.marker === 'none') return;\n\n  if (props.type === 'ordered' && DT_TEXT_LIST_UNORDERED_MARKERS.includes(props.marker)) {\n    warn(`The marker=\"${props.marker}\" value is usually used with type=\"unordered\".`);\n  }\n\n  if (props.type === 'unordered' && DT_TEXT_LIST_ORDERED_MARKERS.includes(props.marker)) {\n    warn(`The marker=\"${props.marker}\" value is usually used with type=\"ordered\".`);\n  }\n}\n\nfunction validateChildren () {\n  const rootElement = listRef.value?.$el ?? listRef.value;\n  if (!rootElement) return;\n\n  for (const child of rootElement.children) {\n    if (child.tagName === 'LI') continue;\n\n    warn('Use DtTextListItem or a native li as the direct child of DtTextList.');\n    break;\n  }\n}\n\nonMounted(() => {\n  if (process.env.NODE_ENV !== 'production') {\n    validateOrderedOnlyProps();\n    validateMarkerFamily();\n    validateChildren();\n  }\n});\n</script>\n"],"mappings":"umBA0CA,IAAM,EAAQ,EA0DR,GAAA,EAAA,EAAA,KAAc,KAAK,EAEzB,EAAA,EAAA,SAAQ,EAAA,qBAAsB,CAC5B,MAAA,EAAA,EAAA,OAAY,EAAO,OAAO,CAC3B,CAAC,CAEF,IAAM,GAAA,EAAA,EAAA,cAA2B,EAAM,OAAS,UAAU,CACpD,GAAA,EAAA,EAAA,cAA6B,EAAU,MAAQ,KAAO,KAAK,CAE3D,GAAA,EAAA,EAAA,cAAsB,EAAM,SAAW,OAAS,OAAS,IAAA,GAAU,CACnE,GAAA,EAAA,EAAA,cAA8B,EAAU,MAAQ,EAAM,MAAQ,IAAA,GAAU,CACxE,GAAA,EAAA,EAAA,cAAiC,EAAU,OAAS,EAAM,SAAW,GAAO,IAAA,GAAU,CAEtF,GAAA,EAAA,EAAA,cAAiC,CACrC,cACA,EAAM,IAAM,oBAAoB,EAAM,MAAQ,KAC9C,CACE,uBAAwB,EAAU,MACnC,CACD,EAAM,OAAS,uBAAuB,EAAM,SAAW,KACvD,EAAM,WAAa,4BAA4B,EAAM,aAAe,KACrE,CAAC,CAGI,EAAO,GAAW,QAAQ,KAAK,gBAAgB,IAAU,CAE/D,SAAS,GAA4B,CAC/B,EAAU,QAEV,EAAM,QAAU,IAAA,IAClB,EAAK,mDAAmD,CAGtD,EAAM,UACR,EAAK,sDAAsD,EAI/D,SAAS,GAAwB,CAC3B,CAAC,EAAM,QAAU,EAAM,SAAW,SAElC,EAAM,OAAS,WAAa,EAAA,+BAA+B,SAAS,EAAM,OAAO,EACnF,EAAK,eAAe,EAAM,OAAO,gDAAgD,CAG/E,EAAM,OAAS,aAAe,EAAA,6BAA6B,SAAS,EAAM,OAAO,EACnF,EAAK,eAAe,EAAM,OAAO,8CAA8C,EAInF,SAAS,GAAoB,CAC3B,IAAM,EAAc,EAAQ,OAAO,KAAO,EAAQ,MAC7C,KAEL,KAAK,IAAM,KAAS,EAAY,SAC1B,KAAM,UAAY,KAEtB,GAAK,uEAAuE,CAC5E,eAIJ,EAAA,EAAA,eAAgB,CACd,QAAA,IAAA,WAA6B,eAC3B,GAA0B,CAC1B,GAAsB,CACtB,GAAkB,GAEpB,2EArKO,EAAA,MAAW,CAAA,SACZ,UAAJ,IAAI,EACJ,UAAQ,eACP,OAAA,EAAA,EAAA,gBAAO,EAAA,MAAe,CACtB,KAAM,EAAA,MACN,MAAO,EAAA,MACP,SAAU,EAAA,kCAGH,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,UAAA,CAAA,CAAA"}

package/dist/TextListItem-DIlrCkaM.cjs

@@ -0,0 +1,2 @@
+require(`./chunk-Bmb41Sf3.cjs`);const e=require(`./common/utils/index.cjs`),t=require(`./lib/text-list/text-list-constants.cjs`),n=require(`./lib/text-list/validators.cjs`);let r=require(`vue`);var i=[`value`],a=(0,r.defineComponent)({name:`DtTextListItem`,__name:`TextListItem`,props:{value:{type:Number,default:void 0},markerTone:{type:String,default:void 0,validator:n.textListMarkerToneValidator},markerClass:{type:[String,Array,Object],default:``},contentClass:{type:[String,Array,Object],default:``}},setup(n){let a=n,o=(0,r.useSlots)(),s=(0,r.inject)(t.DT_TEXT_LIST_CONTEXT,null),c=(0,r.computed)(()=>s?(0,r.unref)(s.type):void 0),l=(0,r.computed)(()=>e.hasSlotContent(o.marker)),u=(0,r.computed)(()=>c.value===`ordered`?a.value:void 0),d=(0,r.computed)(()=>[`d-text-list__item`,{"d-text-list__item--custom-marker":l.value},a.markerTone?`d-text-list__item--marker-tone-${a.markerTone}`:null]),f=e=>console.warn(`[DtTextListItem] ${e}`);return(0,r.onMounted)(()=>{process.env.NODE_ENV!==`production`&&(s||f(`DtTextListItem must be used inside DtTextList.`),a.value!==void 0&&c.value!==`ordered`&&f(`The value prop only applies inside a DtTextList with type="ordered".`))}),(e,t)=>((0,r.openBlock)(),(0,r.createElementBlock)(`li`,{"data-qa":`dt-text-list-item`,class:(0,r.normalizeClass)(d.value),value:u.value},[l.value?((0,r.openBlock)(),(0,r.createElementBlock)(`span`,{key:0,"data-qa":`dt-text-list-item-marker`,class:(0,r.normalizeClass)([`d-text-list__item-marker`,n.markerClass]),"aria-hidden":`true`},[(0,r.renderSlot)(e.$slots,`marker`)],2)):(0,r.createCommentVNode)(``,!0),(0,r.createElementVNode)(`div`,{"data-qa":`dt-text-list-item-content`,class:(0,r.normalizeClass)([`d-text-list__item-content`,n.contentClass])},[(0,r.renderSlot)(e.$slots,`default`)],2)],10,i))}});Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return a}});
+//# sourceMappingURL=TextListItem-DIlrCkaM.cjs.map

package/dist/TextListItem-DIlrCkaM.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextListItem-DIlrCkaM.cjs","names":[],"sources":["../components/TextList/TextListItem.vue","../components/TextList/TextListItem.vue"],"sourcesContent":["<!-- eslint-disable vue/no-restricted-class -->\n<template>\n  <li\n    data-qa=\"dt-text-list-item\"\n    :class=\"textListItemClasses\"\n    :value=\"orderedValue\"\n  >\n    <span\n      v-if=\"hasCustomMarker\"\n      data-qa=\"dt-text-list-item-marker\"\n      class=\"d-text-list__item-marker\"\n      :class=\"markerClass\"\n      aria-hidden=\"true\"\n    >\n      <!-- @slot Custom marker content. Decorative by default. -->\n      <slot name=\"marker\" />\n    </span>\n    <div\n      data-qa=\"dt-text-list-item-content\"\n      :class=\"['d-text-list__item-content', contentClass]\"\n    >\n      <!-- @slot Text list item content. -->\n      <slot />\n    </div>\n  </li>\n</template>\n\n<script setup lang=\"ts\">\n// @ts-nocheck\nimport {\n  computed,\n  inject,\n  onMounted,\n  unref,\n  useSlots,\n} from 'vue';\nimport { hasSlotContent } from '@/common/utils';\nimport { DT_TEXT_LIST_CONTEXT } from './TextListConstants';\nimport { textListMarkerToneValidator } from './Validators';\n\ndefineOptions({\n  name: 'DtTextListItem',\n});\n\nconst props = defineProps({\n  /**\n   * Native `li` value for ordered lists.\n   */\n  value: {\n    type: Number,\n    default: undefined,\n  },\n\n  /**\n   * Marker foreground tone for this item. Overrides the parent DtTextList markerTone.\n   * @values primary, secondary, tertiary, muted, disabled, placeholder, critical, critical-strong, positive, positive-strong, warning, info, info-strong, neutral-black, neutral-white\n   */\n  markerTone: {\n    type: String,\n    default: undefined,\n    validator: textListMarkerToneValidator,\n  },\n\n  /**\n   * Additional class name for the marker wrapper.\n   */\n  markerClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n   * Additional class name for the content wrapper.\n   */\n  contentClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n});\n\nconst slots = useSlots();\nconst parentContext = inject(DT_TEXT_LIST_CONTEXT, null);\nconst parentType = computed(() => parentContext ? unref(parentContext.type) : undefined);\nconst hasCustomMarker = computed(() => hasSlotContent(slots.marker));\nconst orderedValue = computed(() => parentType.value === 'ordered' ? props.value : undefined);\nconst textListItemClasses = computed(() => [\n  'd-text-list__item',\n  { 'd-text-list__item--custom-marker': hasCustomMarker.value },\n  props.markerTone ? `d-text-list__item--marker-tone-${props.markerTone}` : null,\n]);\n\n// eslint-disable-next-line no-console\nconst warn = message => console.warn(`[DtTextListItem] ${message}`);\n\nonMounted(() => {\n  if (process.env.NODE_ENV !== 'production') {\n    if (!parentContext) {\n      warn('DtTextListItem must be used inside DtTextList.');\n    }\n\n    if (props.value !== undefined && parentType.value !== 'ordered') {\n      warn('The value prop only applies inside a DtTextList with type=\"ordered\".');\n    }\n  }\n});\n</script>\n","<!-- eslint-disable vue/no-restricted-class -->\n<template>\n  <li\n    data-qa=\"dt-text-list-item\"\n    :class=\"textListItemClasses\"\n    :value=\"orderedValue\"\n  >\n    <span\n      v-if=\"hasCustomMarker\"\n      data-qa=\"dt-text-list-item-marker\"\n      class=\"d-text-list__item-marker\"\n      :class=\"markerClass\"\n      aria-hidden=\"true\"\n    >\n      <!-- @slot Custom marker content. Decorative by default. -->\n      <slot name=\"marker\" />\n    </span>\n    <div\n      data-qa=\"dt-text-list-item-content\"\n      :class=\"['d-text-list__item-content', contentClass]\"\n    >\n      <!-- @slot Text list item content. -->\n      <slot />\n    </div>\n  </li>\n</template>\n\n<script setup lang=\"ts\">\n// @ts-nocheck\nimport {\n  computed,\n  inject,\n  onMounted,\n  unref,\n  useSlots,\n} from 'vue';\nimport { hasSlotContent } from '@/common/utils';\nimport { DT_TEXT_LIST_CONTEXT } from './TextListConstants';\nimport { textListMarkerToneValidator } from './Validators';\n\ndefineOptions({\n  name: 'DtTextListItem',\n});\n\nconst props = defineProps({\n  /**\n   * Native `li` value for ordered lists.\n   */\n  value: {\n    type: Number,\n    default: undefined,\n  },\n\n  /**\n   * Marker foreground tone for this item. Overrides the parent DtTextList markerTone.\n   * @values primary, secondary, tertiary, muted, disabled, placeholder, critical, critical-strong, positive, positive-strong, warning, info, info-strong, neutral-black, neutral-white\n   */\n  markerTone: {\n    type: String,\n    default: undefined,\n    validator: textListMarkerToneValidator,\n  },\n\n  /**\n   * Additional class name for the marker wrapper.\n   */\n  markerClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n   * Additional class name for the content wrapper.\n   */\n  contentClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n});\n\nconst slots = useSlots();\nconst parentContext = inject(DT_TEXT_LIST_CONTEXT, null);\nconst parentType = computed(() => parentContext ? unref(parentContext.type) : undefined);\nconst hasCustomMarker = computed(() => hasSlotContent(slots.marker));\nconst orderedValue = computed(() => parentType.value === 'ordered' ? props.value : undefined);\nconst textListItemClasses = computed(() => [\n  'd-text-list__item',\n  { 'd-text-list__item--custom-marker': hasCustomMarker.value },\n  props.markerTone ? `d-text-list__item--marker-tone-${props.markerTone}` : null,\n]);\n\n// eslint-disable-next-line no-console\nconst warn = message => console.warn(`[DtTextListItem] ${message}`);\n\nonMounted(() => {\n  if (process.env.NODE_ENV !== 'production') {\n    if (!parentContext) {\n      warn('DtTextListItem must be used inside DtTextList.');\n    }\n\n    if (props.value !== undefined && parentType.value !== 'ordered') {\n      warn('The value prop only applies inside a DtTextList with type=\"ordered\".');\n    }\n  }\n});\n</script>\n"],"mappings":"ogBA4CA,IAAM,EAAQ,EAoCR,GAAA,EAAA,EAAA,WAAkB,CAClB,GAAA,EAAA,EAAA,QAAuB,EAAA,qBAAsB,KAAK,CAClD,GAAA,EAAA,EAAA,cAA4B,GAAA,EAAA,EAAA,OAAsB,EAAc,KAAK,CAAG,IAAA,GAAU,CAClF,GAAA,EAAA,EAAA,cAAiC,EAAA,eAAe,EAAM,OAAO,CAAC,CAC9D,GAAA,EAAA,EAAA,cAA8B,EAAW,QAAU,UAAY,EAAM,MAAQ,IAAA,GAAU,CACvF,GAAA,EAAA,EAAA,cAAqC,CACzC,oBACA,CAAE,mCAAoC,EAAgB,MAAO,CAC7D,EAAM,WAAa,kCAAkC,EAAM,aAAe,KAC3E,CAAC,CAGI,EAAO,GAAW,QAAQ,KAAK,oBAAoB,IAAU,QAEnE,EAAA,EAAA,eAAgB,CACd,QAAA,IAAA,WAA6B,eACtB,GACH,EAAK,iDAAiD,CAGpD,EAAM,QAAU,IAAA,IAAa,EAAW,QAAU,WACpD,EAAK,uEAAuE,GAGhF,oDAhFK,KAAA,CArBH,UAAQ,oBACP,OAAA,EAAA,EAAA,gBAAO,EAAA,MAAmB,CAC1B,MAAO,EAAA,QAGA,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAQD,OAAA,OAPL,UAAQ,2BACR,OAAA,EAAA,EAAA,gBAAK,CAAC,2BACE,EAAA,YAAW,CAAA,CACnB,cAAY,0BAGU,EAAA,OAAA,SAAA,CAAA,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,EAAA,EAAA,EAAA,oBAQlB,MAAA,CALJ,UAAQ,4BACP,OAAA,EAAA,EAAA,gBAAK,CAAA,4BAAgC,EAAA,aAAY,CAAA,oBAG1C,EAAA,OAAA,UAAA,CAAA,CAAA,EAAA,CAAA,CAAA,GAAA,EAAA"}

package/dist/TextListItem-ImUi_FWh.js

@@ -0,0 +1,62 @@
+import { hasSlotContent as e } from "./common/utils/index.js";
+import { DT_TEXT_LIST_CONTEXT as t } from "./lib/text-list/text-list-constants.js";
+import { textListMarkerToneValidator as n } from "./lib/text-list/validators.js";
+import { computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, inject as c, normalizeClass as l, onMounted as u, openBlock as d, renderSlot as f, unref as p, useSlots as m } from "vue";
+//#region components/TextList/TextListItem.vue?vue&type=script&setup=true&lang.ts
+var h = ["value"], g = /* @__PURE__ */ s({
+	name: "DtTextListItem",
+	__name: "TextListItem",
+	props: {
+		value: {
+			type: Number,
+			default: void 0
+		},
+		markerTone: {
+			type: String,
+			default: void 0,
+			validator: n
+		},
+		markerClass: {
+			type: [
+				String,
+				Array,
+				Object
+			],
+			default: ""
+		},
+		contentClass: {
+			type: [
+				String,
+				Array,
+				Object
+			],
+			default: ""
+		}
+	},
+	setup(n) {
+		let s = n, g = m(), _ = c(t, null), v = r(() => _ ? p(_.type) : void 0), y = r(() => e(g.marker)), b = r(() => v.value === "ordered" ? s.value : void 0), x = r(() => [
+			"d-text-list__item",
+			{ "d-text-list__item--custom-marker": y.value },
+			s.markerTone ? `d-text-list__item--marker-tone-${s.markerTone}` : null
+		]), S = (e) => console.warn(`[DtTextListItem] ${e}`);
+		return u(() => {
+			process.env.NODE_ENV !== "production" && (_ || S("DtTextListItem must be used inside DtTextList."), s.value !== void 0 && v.value !== "ordered" && S("The value prop only applies inside a DtTextList with type=\"ordered\"."));
+		}), (e, t) => (d(), a("li", {
+			"data-qa": "dt-text-list-item",
+			class: l(x.value),
+			value: b.value
+		}, [y.value ? (d(), a("span", {
+			key: 0,
+			"data-qa": "dt-text-list-item-marker",
+			class: l(["d-text-list__item-marker", n.markerClass]),
+			"aria-hidden": "true"
+		}, [f(e.$slots, "marker")], 2)) : i("", !0), o("div", {
+			"data-qa": "dt-text-list-item-content",
+			class: l(["d-text-list__item-content", n.contentClass])
+		}, [f(e.$slots, "default")], 2)], 10, h));
+	}
+});
+//#endregion
+export { g as t };
+
+//# sourceMappingURL=TextListItem-ImUi_FWh.js.map

package/dist/TextListItem-ImUi_FWh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextListItem-ImUi_FWh.js","names":[],"sources":["../components/TextList/TextListItem.vue","../components/TextList/TextListItem.vue"],"sourcesContent":["<!-- eslint-disable vue/no-restricted-class -->\n<template>\n  <li\n    data-qa=\"dt-text-list-item\"\n    :class=\"textListItemClasses\"\n    :value=\"orderedValue\"\n  >\n    <span\n      v-if=\"hasCustomMarker\"\n      data-qa=\"dt-text-list-item-marker\"\n      class=\"d-text-list__item-marker\"\n      :class=\"markerClass\"\n      aria-hidden=\"true\"\n    >\n      <!-- @slot Custom marker content. Decorative by default. -->\n      <slot name=\"marker\" />\n    </span>\n    <div\n      data-qa=\"dt-text-list-item-content\"\n      :class=\"['d-text-list__item-content', contentClass]\"\n    >\n      <!-- @slot Text list item content. -->\n      <slot />\n    </div>\n  </li>\n</template>\n\n<script setup lang=\"ts\">\n// @ts-nocheck\nimport {\n  computed,\n  inject,\n  onMounted,\n  unref,\n  useSlots,\n} from 'vue';\nimport { hasSlotContent } from '@/common/utils';\nimport { DT_TEXT_LIST_CONTEXT } from './TextListConstants';\nimport { textListMarkerToneValidator } from './Validators';\n\ndefineOptions({\n  name: 'DtTextListItem',\n});\n\nconst props = defineProps({\n  /**\n   * Native `li` value for ordered lists.\n   */\n  value: {\n    type: Number,\n    default: undefined,\n  },\n\n  /**\n   * Marker foreground tone for this item. Overrides the parent DtTextList markerTone.\n   * @values primary, secondary, tertiary, muted, disabled, placeholder, critical, critical-strong, positive, positive-strong, warning, info, info-strong, neutral-black, neutral-white\n   */\n  markerTone: {\n    type: String,\n    default: undefined,\n    validator: textListMarkerToneValidator,\n  },\n\n  /**\n   * Additional class name for the marker wrapper.\n   */\n  markerClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n   * Additional class name for the content wrapper.\n   */\n  contentClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n});\n\nconst slots = useSlots();\nconst parentContext = inject(DT_TEXT_LIST_CONTEXT, null);\nconst parentType = computed(() => parentContext ? unref(parentContext.type) : undefined);\nconst hasCustomMarker = computed(() => hasSlotContent(slots.marker));\nconst orderedValue = computed(() => parentType.value === 'ordered' ? props.value : undefined);\nconst textListItemClasses = computed(() => [\n  'd-text-list__item',\n  { 'd-text-list__item--custom-marker': hasCustomMarker.value },\n  props.markerTone ? `d-text-list__item--marker-tone-${props.markerTone}` : null,\n]);\n\n// eslint-disable-next-line no-console\nconst warn = message => console.warn(`[DtTextListItem] ${message}`);\n\nonMounted(() => {\n  if (process.env.NODE_ENV !== 'production') {\n    if (!parentContext) {\n      warn('DtTextListItem must be used inside DtTextList.');\n    }\n\n    if (props.value !== undefined && parentType.value !== 'ordered') {\n      warn('The value prop only applies inside a DtTextList with type=\"ordered\".');\n    }\n  }\n});\n</script>\n","<!-- eslint-disable vue/no-restricted-class -->\n<template>\n  <li\n    data-qa=\"dt-text-list-item\"\n    :class=\"textListItemClasses\"\n    :value=\"orderedValue\"\n  >\n    <span\n      v-if=\"hasCustomMarker\"\n      data-qa=\"dt-text-list-item-marker\"\n      class=\"d-text-list__item-marker\"\n      :class=\"markerClass\"\n      aria-hidden=\"true\"\n    >\n      <!-- @slot Custom marker content. Decorative by default. -->\n      <slot name=\"marker\" />\n    </span>\n    <div\n      data-qa=\"dt-text-list-item-content\"\n      :class=\"['d-text-list__item-content', contentClass]\"\n    >\n      <!-- @slot Text list item content. -->\n      <slot />\n    </div>\n  </li>\n</template>\n\n<script setup lang=\"ts\">\n// @ts-nocheck\nimport {\n  computed,\n  inject,\n  onMounted,\n  unref,\n  useSlots,\n} from 'vue';\nimport { hasSlotContent } from '@/common/utils';\nimport { DT_TEXT_LIST_CONTEXT } from './TextListConstants';\nimport { textListMarkerToneValidator } from './Validators';\n\ndefineOptions({\n  name: 'DtTextListItem',\n});\n\nconst props = defineProps({\n  /**\n   * Native `li` value for ordered lists.\n   */\n  value: {\n    type: Number,\n    default: undefined,\n  },\n\n  /**\n   * Marker foreground tone for this item. Overrides the parent DtTextList markerTone.\n   * @values primary, secondary, tertiary, muted, disabled, placeholder, critical, critical-strong, positive, positive-strong, warning, info, info-strong, neutral-black, neutral-white\n   */\n  markerTone: {\n    type: String,\n    default: undefined,\n    validator: textListMarkerToneValidator,\n  },\n\n  /**\n   * Additional class name for the marker wrapper.\n   */\n  markerClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n   * Additional class name for the content wrapper.\n   */\n  contentClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n});\n\nconst slots = useSlots();\nconst parentContext = inject(DT_TEXT_LIST_CONTEXT, null);\nconst parentType = computed(() => parentContext ? unref(parentContext.type) : undefined);\nconst hasCustomMarker = computed(() => hasSlotContent(slots.marker));\nconst orderedValue = computed(() => parentType.value === 'ordered' ? props.value : undefined);\nconst textListItemClasses = computed(() => [\n  'd-text-list__item',\n  { 'd-text-list__item--custom-marker': hasCustomMarker.value },\n  props.markerTone ? `d-text-list__item--marker-tone-${props.markerTone}` : null,\n]);\n\n// eslint-disable-next-line no-console\nconst warn = message => console.warn(`[DtTextListItem] ${message}`);\n\nonMounted(() => {\n  if (process.env.NODE_ENV !== 'production') {\n    if (!parentContext) {\n      warn('DtTextListItem must be used inside DtTextList.');\n    }\n\n    if (props.value !== undefined && parentType.value !== 'ordered') {\n      warn('The value prop only applies inside a DtTextList with type=\"ordered\".');\n    }\n  }\n});\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4CA,IAAM,IAAQ,GAoCR,IAAQ,GAAU,EAClB,IAAgB,EAAO,GAAsB,KAAK,EAClD,IAAa,QAAe,IAAgB,EAAM,EAAc,KAAK,GAAG,KAAA,EAAU,EAClF,IAAkB,QAAe,EAAe,EAAM,OAAO,CAAC,EAC9D,IAAe,QAAe,EAAW,UAAU,YAAY,EAAM,QAAQ,KAAA,EAAU,EACvF,IAAsB,QAAe;GACzC;GACA,EAAE,oCAAoC,EAAgB,OAAO;GAC7D,EAAM,aAAa,kCAAkC,EAAM,eAAe;GAC3E,CAAC,EAGI,KAAO,MAAW,QAAQ,KAAK,oBAAoB,IAAU;SAEnE,QAAgB;AACd,GAAA,QAAA,IAAA,aAA6B,iBACtB,KACH,EAAK,iDAAiD,EAGpD,EAAM,UAAU,KAAA,KAAa,EAAW,UAAU,aACpD,EAAK,yEAAuE;IAGhF,kBAtGA,EAsBK,MAAA;GArBH,WAAQ;GACP,OAAK,EAAE,EAAA,MAAmB;GAC1B,OAAO,EAAA;MAGA,EAAA,SAAA,GAAA,EADR,EASO,QAAA;;GAPL,WAAQ;GACR,OAAK,EAAA,CAAC,4BACE,EAAA,YAAW,CAAA;GACnB,eAAY;MAGZ,EAAsB,EAAA,QAAA,SAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,EAExB,EAMM,OAAA;GALJ,WAAQ;GACP,OAAK,EAAA,CAAA,6BAAgC,EAAA,aAAY,CAAA;MAGlD,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA,CAAA,EAAA,IAAA,EAAA"}