yuyeon 0.0.13 → 0.0.15

package/lib/abstract/items.mjs

@@ -0,0 +1,20 @@
+import { propsFactory } from "../util/vue-component.mjs";
+export const pressItemsPropsOptions = propsFactory({
+  items: {
+    type: Array,
+    default: () => []
+  },
+  itemKey: {
+    type: String,
+    default: 'key'
+  },
+  itemText: {
+    type: String,
+    default: 'text'
+  },
+  itemChildren: {
+    type: [Boolean, String],
+    default: 'children'
+  }
+}, 'abstract.items');
+//# sourceMappingURL=items.mjs.map

package/lib/abstract/items.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"items.mjs","names":["propsFactory","pressItemsPropsOptions","items","type","Array","default","itemKey","String","itemText","itemChildren","Boolean"],"sources":["../../src/abstract/items.ts"],"sourcesContent":["import { PropType } from 'vue';\n\nimport { propsFactory } from '../util/vue-component';\n\nexport const pressItemsPropsOptions = propsFactory(\n  {\n    items: {\n      type: Array as PropType<any[]>,\n      default: () => [],\n    },\n    itemKey: {\n      type: String as PropType<string>,\n      default: 'key',\n    },\n    itemText: {\n      type: String as PropType<string>,\n      default: 'text',\n    },\n    itemChildren: {\n      type: [Boolean, String] as PropType<boolean | string>,\n      default: 'children',\n    },\n  },\n  'abstract.items',\n);\n"],"mappings":"SAESA,YAAY;AAErB,OAAO,MAAMC,sBAAsB,GAAGD,YAAY,CAChD;EACEE,KAAK,EAAE;IACLC,IAAI,EAAEC,KAAwB;IAC9BC,OAAO,EAAEA,CAAA,KAAM;EACjB,CAAC;EACDC,OAAO,EAAE;IACPH,IAAI,EAAEI,MAA0B;IAChCF,OAAO,EAAE;EACX,CAAC;EACDG,QAAQ,EAAE;IACRL,IAAI,EAAEI,MAA0B;IAChCF,OAAO,EAAE;EACX,CAAC;EACDI,YAAY,EAAE;IACZN,IAAI,EAAE,CAACO,OAAO,EAAEH,MAAM,CAA+B;IACrDF,OAAO,EAAE;EACX;AACF,CAAC,EACD,gBACF,CAAC"}

package/lib/components/button/YButton.mjs

@@ -1,12 +1,12 @@
 import { defineComponent, h, withDirectives } from 'vue';
 import { PlateWave } from "../../directives/plate-wave/index.mjs";
-import { isColorValue } from "../../util/ui.mjs";
 import { getSlot, propsFactory } from "../../util/vue-component.mjs";
 import { YSpinnerRing } from "../loading/YSpinnerRing.mjs";
 /**
  * Style
  */
 import "./YButton.scss";
+import { isColorValue } from "../../util/color/index.mjs";
 const NAME = 'y-button';
 export const pressYButtonProps = propsFactory({
   loading: Boolean,
@@ -91,7 +91,7 @@ export const YButton = defineComponent({
         color
       } = this;
       if (color && !isColorValue(color)) {
-        color = `rgba(var(--y-theme--${color}), 1)`;
+        color = `rgba(var(--y-theme-${color}), 1)`;
       }
       return {
         [`--y-button__color`]: color

package/lib/components/button/YButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YButton.mjs","names":["defineComponent","h","withDirectives","PlateWave","isColorValue","getSlot","propsFactory","YSpinnerRing","NAME","pressYButtonProps","loading","Boolean","disabled","type","variation","String","small","icon","outlined","default","rounded","filled","text","color","noWave","YButton","name","directives","props","computed","variations","split","map","value","trim","classes","includes","styles","methods","createContent","defaultSlot","children","push","width","height","class","getClasses","onClick","e","preventDefault","render","style","undefined"],"sources":["../../../src/components/button/YButton.ts"],"sourcesContent":["import type { ExtractPropTypes, PropType, VNodeArrayChildren } from 'vue';\nimport { defineComponent, h, withDirectives } from 'vue';\n\nimport { PlateWave } from '../../directives/plate-wave';\nimport { isColorValue } from '../../util/ui';\nimport { getSlot, propsFactory } from '../../util/vue-component';\nimport { YSpinnerRing } from '../loading/YSpinnerRing';\n\n/**\n * Style\n */\nimport './YButton.scss';\n\nconst NAME = 'y-button';\n\nexport const pressYButtonProps = propsFactory(\n  {\n    loading: Boolean,\n    disabled: {\n      type: Boolean,\n    },\n    //\n    variation: {\n      type: String as PropType<string>,\n    },\n    small: Boolean,\n    icon: Boolean,\n    outlined: {\n      type: Boolean,\n      default: false,\n    },\n    rounded: {\n      type: Boolean,\n      default: false,\n    },\n    filled: {\n      type: Boolean,\n      default: false,\n    },\n    text: {\n      type: Boolean,\n    },\n    //\n    color: {\n      type: String,\n    },\n    noWave: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  'YButton',\n);\n\nexport const YButton = defineComponent({\n  name: 'YButton',\n  directives: {\n    PlateWave,\n  },\n  props: {\n    ...pressYButtonProps(),\n  },\n  computed: {\n    variations(): any[] {\n      const { variation } = this;\n      if (variation) {\n        return variation.split(',').map((value) => {\n          return value.trim();\n        });\n      }\n      return [];\n    },\n    //\n    classes() {\n      const { variations, outlined, rounded, filled, text, small, icon } = this;\n      return {\n        [`${NAME}--outlined`]: variations.includes('outlined') || outlined,\n        [`${NAME}--rounded`]: variations.includes('rounded') || rounded,\n        [`${NAME}--filled`]: variations.includes('filled') || filled,\n        [`${NAME}--text`]: variations.includes('text') || text,\n        [`${NAME}--small`]: variations.includes('small') || small,\n        [`${NAME}--icon`]: variations.includes('icon') || icon,\n        [`${NAME}--color`]: this.color,\n        [`${NAME}--loading`]: this.loading,\n        [`${NAME}--disabled`]: this.disabled,\n      };\n    },\n    styles(): Record<string, any> {\n      let { color } = this;\n      if (color && !isColorValue(color)) {\n        color = `rgba(var(--y-theme--${color}), 1)`;\n      }\n      return {\n        [`--y-button__color`]: color,\n      };\n    },\n  },\n  methods: {\n    createContent() {\n      const defaultSlot = getSlot(this, 'default');\n      const children: VNodeArrayChildren = [];\n      if (this.loading) {\n        children.push(h(YSpinnerRing, { width: '24', height: '24' }));\n      }\n      children.push(defaultSlot);\n      return h('span', { class: 'y-button__content' }, children);\n    },\n    getClasses() {\n      return this.classes;\n    },\n    /// Events\n    onClick(e: MouseEvent) {\n      e.preventDefault();\n      if (this.loading) {\n        return;\n      }\n    },\n  },\n  render() {\n    const { onClick, styles, noWave, loading } = this;\n    return withDirectives(\n      h(\n        'button',\n        {\n          class: {\n            ...this.getClasses(),\n            [`${NAME}`]: true,\n          },\n          style: styles,\n          onClick,\n          '^disabled': this.disabled ? true : undefined,\n        },\n        this.createContent(),\n      ),\n      [[PlateWave, !noWave && !loading]],\n    );\n  },\n});\n\nexport type YButton = InstanceType<typeof YButton>;\n"],"mappings":"AACA,SAASA,eAAe,EAAEC,CAAC,EAAEC,cAAc,QAAQ,KAAK;AAAC,SAEhDC,SAAS;AAAA,SACTC,YAAY;AAAA,SACZC,OAAO,EAAEC,YAAY;AAAA,SACrBC,YAAY;AAErB;AACA;AACA;AACA;AAEA,MAAMC,IAAI,GAAG,UAAU;AAEvB,OAAO,MAAMC,iBAAiB,GAAGH,YAAY,CAC3C;EACEI,OAAO,EAAEC,OAAO;EAChBC,QAAQ,EAAE;IACRC,IAAI,EAAEF;EACR,CAAC;EACD;EACAG,SAAS,EAAE;IACTD,IAAI,EAAEE;EACR,CAAC;EACDC,KAAK,EAAEL,OAAO;EACdM,IAAI,EAAEN,OAAO;EACbO,QAAQ,EAAE;IACRL,IAAI,EAAEF,OAAO;IACbQ,OAAO,EAAE;EACX,CAAC;EACDC,OAAO,EAAE;IACPP,IAAI,EAAEF,OAAO;IACbQ,OAAO,EAAE;EACX,CAAC;EACDE,MAAM,EAAE;IACNR,IAAI,EAAEF,OAAO;IACbQ,OAAO,EAAE;EACX,CAAC;EACDG,IAAI,EAAE;IACJT,IAAI,EAAEF;EACR,CAAC;EACD;EACAY,KAAK,EAAE;IACLV,IAAI,EAAEE;EACR,CAAC;EACDS,MAAM,EAAE;IACNX,IAAI,EAAEF,OAAO;IACbQ,OAAO,EAAE;EACX;AACF,CAAC,EACD,SACF,CAAC;AAED,OAAO,MAAMM,OAAO,GAAGzB,eAAe,CAAC;EACrC0B,IAAI,EAAE,SAAS;EACfC,UAAU,EAAE;IACVxB;EACF,CAAC;EACDyB,KAAK,EAAE;IACL,GAAGnB,iBAAiB,CAAC;EACvB,CAAC;EACDoB,QAAQ,EAAE;IACRC,UAAUA,CAAA,EAAU;MAClB,MAAM;QAAEhB;MAAU,CAAC,GAAG,IAAI;MAC1B,IAAIA,SAAS,EAAE;QACb,OAAOA,SAAS,CAACiB,KAAK,CAAC,GAAG,CAAC,CAACC,GAAG,CAAEC,KAAK,IAAK;UACzC,OAAOA,KAAK,CAACC,IAAI,CAAC,CAAC;QACrB,CAAC,CAAC;MACJ;MACA,OAAO,EAAE;IACX,CAAC;IACD;IACAC,OAAOA,CAAA,EAAG;MACR,MAAM;QAAEL,UAAU;QAAEZ,QAAQ;QAAEE,OAAO;QAAEC,MAAM;QAAEC,IAAI;QAAEN,KAAK;QAAEC;MAAK,CAAC,GAAG,IAAI;MACzE,OAAO;QACL,CAAE,GAAET,IAAK,YAAW,GAAGsB,UAAU,CAACM,QAAQ,CAAC,UAAU,CAAC,IAAIlB,QAAQ;QAClE,CAAE,GAAEV,IAAK,WAAU,GAAGsB,UAAU,CAACM,QAAQ,CAAC,SAAS,CAAC,IAAIhB,OAAO;QAC/D,CAAE,GAAEZ,IAAK,UAAS,GAAGsB,UAAU,CAACM,QAAQ,CAAC,QAAQ,CAAC,IAAIf,MAAM;QAC5D,CAAE,GAAEb,IAAK,QAAO,GAAGsB,UAAU,CAACM,QAAQ,CAAC,MAAM,CAAC,IAAId,IAAI;QACtD,CAAE,GAAEd,IAAK,SAAQ,GAAGsB,UAAU,CAACM,QAAQ,CAAC,OAAO,CAAC,IAAIpB,KAAK;QACzD,CAAE,GAAER,IAAK,QAAO,GAAGsB,UAAU,CAACM,QAAQ,CAAC,MAAM,CAAC,IAAInB,IAAI;QACtD,CAAE,GAAET,IAAK,SAAQ,GAAG,IAAI,CAACe,KAAK;QAC9B,CAAE,GAAEf,IAAK,WAAU,GAAG,IAAI,CAACE,OAAO;QAClC,CAAE,GAAEF,IAAK,YAAW,GAAG,IAAI,CAACI;MAC9B,CAAC;IACH,CAAC;IACDyB,MAAMA,CAAA,EAAwB;MAC5B,IAAI;QAAEd;MAAM,CAAC,GAAG,IAAI;MACpB,IAAIA,KAAK,IAAI,CAACnB,YAAY,CAACmB,KAAK,CAAC,EAAE;QACjCA,KAAK,GAAI,uBAAsBA,KAAM,OAAM;MAC7C;MACA,OAAO;QACL,CAAE,mBAAkB,GAAGA;MACzB,CAAC;IACH;EACF,CAAC;EACDe,OAAO,EAAE;IACPC,aAAaA,CAAA,EAAG;MACd,MAAMC,WAAW,GAAGnC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC;MAC5C,MAAMoC,QAA4B,GAAG,EAAE;MACvC,IAAI,IAAI,CAAC/B,OAAO,EAAE;QAChB+B,QAAQ,CAACC,IAAI,CAACzC,CAAC,CAACM,YAAY,EAAE;UAAEoC,KAAK,EAAE,IAAI;UAAEC,MAAM,EAAE;QAAK,CAAC,CAAC,CAAC;MAC/D;MACAH,QAAQ,CAACC,IAAI,CAACF,WAAW,CAAC;MAC1B,OAAOvC,CAAC,CAAC,MAAM,EAAE;QAAE4C,KAAK,EAAE;MAAoB,CAAC,EAAEJ,QAAQ,CAAC;IAC5D,CAAC;IACDK,UAAUA,CAAA,EAAG;MACX,OAAO,IAAI,CAACX,OAAO;IACrB,CAAC;IACD;IACAY,OAAOA,CAACC,CAAa,EAAE;MACrBA,CAAC,CAACC,cAAc,CAAC,CAAC;MAClB,IAAI,IAAI,CAACvC,OAAO,EAAE;QAChB;MACF;IACF;EACF,CAAC;EACDwC,MAAMA,CAAA,EAAG;IACP,MAAM;MAAEH,OAAO;MAAEV,MAAM;MAAEb,MAAM;MAAEd;IAAQ,CAAC,GAAG,IAAI;IACjD,OAAOR,cAAc,CACnBD,CAAC,CACC,QAAQ,EACR;MACE4C,KAAK,EAAE;QACL,GAAG,IAAI,CAACC,UAAU,CAAC,CAAC;QACpB,CAAE,GAAEtC,IAAK,EAAC,GAAG;MACf,CAAC;MACD2C,KAAK,EAAEd,MAAM;MACbU,OAAO;MACP,WAAW,EAAE,IAAI,CAACnC,QAAQ,GAAG,IAAI,GAAGwC;IACtC,CAAC,EACD,IAAI,CAACb,aAAa,CAAC,CACrB,CAAC,EACD,CAAC,CAACpC,SAAS,EAAE,CAACqB,MAAM,IAAI,CAACd,OAAO,CAAC,CACnC,CAAC;EACH;AACF,CAAC,CAAC"}
+{"version":3,"file":"YButton.mjs","names":["defineComponent","h","withDirectives","PlateWave","getSlot","propsFactory","YSpinnerRing","isColorValue","NAME","pressYButtonProps","loading","Boolean","disabled","type","variation","String","small","icon","outlined","default","rounded","filled","text","color","noWave","YButton","name","directives","props","computed","variations","split","map","value","trim","classes","includes","styles","methods","createContent","defaultSlot","children","push","width","height","class","getClasses","onClick","e","preventDefault","render","style","undefined"],"sources":["../../../src/components/button/YButton.ts"],"sourcesContent":["import type { ExtractPropTypes, PropType, VNodeArrayChildren } from 'vue';\nimport { defineComponent, h, withDirectives } from 'vue';\n\nimport { PlateWave } from '../../directives/plate-wave';\nimport { getSlot, propsFactory } from '../../util/vue-component';\nimport { YSpinnerRing } from '../loading/YSpinnerRing';\n\n/**\n * Style\n */\nimport './YButton.scss';\nimport { isColorValue } from \"../../util/color\";\n\nconst NAME = 'y-button';\n\nexport const pressYButtonProps = propsFactory(\n  {\n    loading: Boolean,\n    disabled: {\n      type: Boolean,\n    },\n    //\n    variation: {\n      type: String as PropType<string>,\n    },\n    small: Boolean,\n    icon: Boolean,\n    outlined: {\n      type: Boolean,\n      default: false,\n    },\n    rounded: {\n      type: Boolean,\n      default: false,\n    },\n    filled: {\n      type: Boolean,\n      default: false,\n    },\n    text: {\n      type: Boolean,\n    },\n    //\n    color: {\n      type: String,\n    },\n    noWave: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  'YButton',\n);\n\nexport const YButton = defineComponent({\n  name: 'YButton',\n  directives: {\n    PlateWave,\n  },\n  props: {\n    ...pressYButtonProps(),\n  },\n  computed: {\n    variations(): any[] {\n      const { variation } = this;\n      if (variation) {\n        return variation.split(',').map((value) => {\n          return value.trim();\n        });\n      }\n      return [];\n    },\n    //\n    classes() {\n      const { variations, outlined, rounded, filled, text, small, icon } = this;\n      return {\n        [`${NAME}--outlined`]: variations.includes('outlined') || outlined,\n        [`${NAME}--rounded`]: variations.includes('rounded') || rounded,\n        [`${NAME}--filled`]: variations.includes('filled') || filled,\n        [`${NAME}--text`]: variations.includes('text') || text,\n        [`${NAME}--small`]: variations.includes('small') || small,\n        [`${NAME}--icon`]: variations.includes('icon') || icon,\n        [`${NAME}--color`]: this.color,\n        [`${NAME}--loading`]: this.loading,\n        [`${NAME}--disabled`]: this.disabled,\n      };\n    },\n    styles(): Record<string, any> {\n      let { color } = this;\n      if (color && !isColorValue(color)) {\n        color = `rgba(var(--y-theme-${color}), 1)`;\n      }\n      return {\n        [`--y-button__color`]: color,\n      };\n    },\n  },\n  methods: {\n    createContent() {\n      const defaultSlot = getSlot(this, 'default');\n      const children: VNodeArrayChildren = [];\n      if (this.loading) {\n        children.push(h(YSpinnerRing, { width: '24', height: '24' }));\n      }\n      children.push(defaultSlot);\n      return h('span', { class: 'y-button__content' }, children);\n    },\n    getClasses() {\n      return this.classes;\n    },\n    /// Events\n    onClick(e: MouseEvent) {\n      e.preventDefault();\n      if (this.loading) {\n        return;\n      }\n    },\n  },\n  render() {\n    const { onClick, styles, noWave, loading } = this;\n    return withDirectives(\n      h(\n        'button',\n        {\n          class: {\n            ...this.getClasses(),\n            [`${NAME}`]: true,\n          },\n          style: styles,\n          onClick,\n          '^disabled': this.disabled ? true : undefined,\n        },\n        this.createContent(),\n      ),\n      [[PlateWave, !noWave && !loading]],\n    );\n  },\n});\n\nexport type YButton = InstanceType<typeof YButton>;\n"],"mappings":"AACA,SAASA,eAAe,EAAEC,CAAC,EAAEC,cAAc,QAAQ,KAAK;AAAC,SAEhDC,SAAS;AAAA,SACTC,OAAO,EAAEC,YAAY;AAAA,SACrBC,YAAY;AAErB;AACA;AACA;AACA;AAAwB,SACfC,YAAY;AAErB,MAAMC,IAAI,GAAG,UAAU;AAEvB,OAAO,MAAMC,iBAAiB,GAAGJ,YAAY,CAC3C;EACEK,OAAO,EAAEC,OAAO;EAChBC,QAAQ,EAAE;IACRC,IAAI,EAAEF;EACR,CAAC;EACD;EACAG,SAAS,EAAE;IACTD,IAAI,EAAEE;EACR,CAAC;EACDC,KAAK,EAAEL,OAAO;EACdM,IAAI,EAAEN,OAAO;EACbO,QAAQ,EAAE;IACRL,IAAI,EAAEF,OAAO;IACbQ,OAAO,EAAE;EACX,CAAC;EACDC,OAAO,EAAE;IACPP,IAAI,EAAEF,OAAO;IACbQ,OAAO,EAAE;EACX,CAAC;EACDE,MAAM,EAAE;IACNR,IAAI,EAAEF,OAAO;IACbQ,OAAO,EAAE;EACX,CAAC;EACDG,IAAI,EAAE;IACJT,IAAI,EAAEF;EACR,CAAC;EACD;EACAY,KAAK,EAAE;IACLV,IAAI,EAAEE;EACR,CAAC;EACDS,MAAM,EAAE;IACNX,IAAI,EAAEF,OAAO;IACbQ,OAAO,EAAE;EACX;AACF,CAAC,EACD,SACF,CAAC;AAED,OAAO,MAAMM,OAAO,GAAGzB,eAAe,CAAC;EACrC0B,IAAI,EAAE,SAAS;EACfC,UAAU,EAAE;IACVxB;EACF,CAAC;EACDyB,KAAK,EAAE;IACL,GAAGnB,iBAAiB,CAAC;EACvB,CAAC;EACDoB,QAAQ,EAAE;IACRC,UAAUA,CAAA,EAAU;MAClB,MAAM;QAAEhB;MAAU,CAAC,GAAG,IAAI;MAC1B,IAAIA,SAAS,EAAE;QACb,OAAOA,SAAS,CAACiB,KAAK,CAAC,GAAG,CAAC,CAACC,GAAG,CAAEC,KAAK,IAAK;UACzC,OAAOA,KAAK,CAACC,IAAI,CAAC,CAAC;QACrB,CAAC,CAAC;MACJ;MACA,OAAO,EAAE;IACX,CAAC;IACD;IACAC,OAAOA,CAAA,EAAG;MACR,MAAM;QAAEL,UAAU;QAAEZ,QAAQ;QAAEE,OAAO;QAAEC,MAAM;QAAEC,IAAI;QAAEN,KAAK;QAAEC;MAAK,CAAC,GAAG,IAAI;MACzE,OAAO;QACL,CAAE,GAAET,IAAK,YAAW,GAAGsB,UAAU,CAACM,QAAQ,CAAC,UAAU,CAAC,IAAIlB,QAAQ;QAClE,CAAE,GAAEV,IAAK,WAAU,GAAGsB,UAAU,CAACM,QAAQ,CAAC,SAAS,CAAC,IAAIhB,OAAO;QAC/D,CAAE,GAAEZ,IAAK,UAAS,GAAGsB,UAAU,CAACM,QAAQ,CAAC,QAAQ,CAAC,IAAIf,MAAM;QAC5D,CAAE,GAAEb,IAAK,QAAO,GAAGsB,UAAU,CAACM,QAAQ,CAAC,MAAM,CAAC,IAAId,IAAI;QACtD,CAAE,GAAEd,IAAK,SAAQ,GAAGsB,UAAU,CAACM,QAAQ,CAAC,OAAO,CAAC,IAAIpB,KAAK;QACzD,CAAE,GAAER,IAAK,QAAO,GAAGsB,UAAU,CAACM,QAAQ,CAAC,MAAM,CAAC,IAAInB,IAAI;QACtD,CAAE,GAAET,IAAK,SAAQ,GAAG,IAAI,CAACe,KAAK;QAC9B,CAAE,GAAEf,IAAK,WAAU,GAAG,IAAI,CAACE,OAAO;QAClC,CAAE,GAAEF,IAAK,YAAW,GAAG,IAAI,CAACI;MAC9B,CAAC;IACH,CAAC;IACDyB,MAAMA,CAAA,EAAwB;MAC5B,IAAI;QAAEd;MAAM,CAAC,GAAG,IAAI;MACpB,IAAIA,KAAK,IAAI,CAAChB,YAAY,CAACgB,KAAK,CAAC,EAAE;QACjCA,KAAK,GAAI,sBAAqBA,KAAM,OAAM;MAC5C;MACA,OAAO;QACL,CAAE,mBAAkB,GAAGA;MACzB,CAAC;IACH;EACF,CAAC;EACDe,OAAO,EAAE;IACPC,aAAaA,CAAA,EAAG;MACd,MAAMC,WAAW,GAAGpC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC;MAC5C,MAAMqC,QAA4B,GAAG,EAAE;MACvC,IAAI,IAAI,CAAC/B,OAAO,EAAE;QAChB+B,QAAQ,CAACC,IAAI,CAACzC,CAAC,CAACK,YAAY,EAAE;UAAEqC,KAAK,EAAE,IAAI;UAAEC,MAAM,EAAE;QAAK,CAAC,CAAC,CAAC;MAC/D;MACAH,QAAQ,CAACC,IAAI,CAACF,WAAW,CAAC;MAC1B,OAAOvC,CAAC,CAAC,MAAM,EAAE;QAAE4C,KAAK,EAAE;MAAoB,CAAC,EAAEJ,QAAQ,CAAC;IAC5D,CAAC;IACDK,UAAUA,CAAA,EAAG;MACX,OAAO,IAAI,CAACX,OAAO;IACrB,CAAC;IACD;IACAY,OAAOA,CAACC,CAAa,EAAE;MACrBA,CAAC,CAACC,cAAc,CAAC,CAAC;MAClB,IAAI,IAAI,CAACvC,OAAO,EAAE;QAChB;MACF;IACF;EACF,CAAC;EACDwC,MAAMA,CAAA,EAAG;IACP,MAAM;MAAEH,OAAO;MAAEV,MAAM;MAAEb,MAAM;MAAEd;IAAQ,CAAC,GAAG,IAAI;IACjD,OAAOR,cAAc,CACnBD,CAAC,CACC,QAAQ,EACR;MACE4C,KAAK,EAAE;QACL,GAAG,IAAI,CAACC,UAAU,CAAC,CAAC;QACpB,CAAE,GAAEtC,IAAK,EAAC,GAAG;MACf,CAAC;MACD2C,KAAK,EAAEd,MAAM;MACbU,OAAO;MACP,WAAW,EAAE,IAAI,CAACnC,QAAQ,GAAG,IAAI,GAAGwC;IACtC,CAAC,EACD,IAAI,CAACb,aAAa,CAAC,CACrB,CAAC,EACD,CAAC,CAACpC,SAAS,EAAE,CAACqB,MAAM,IAAI,CAACd,OAAO,CAAC,CACnC,CAAC;EACH;AACF,CAAC,CAAC"}

package/lib/components/button/YButton.scss

@@ -6,7 +6,7 @@ $button-before-opacity: 0.06 !default;
 $button-disabled-background: #d3d3d3 !default;
 
 .y-button {
-  --y-button__color: var(--y-theme--primary);
+  --y-button__color: var(--y-theme-primary);
 
   cursor: pointer;
   display: inline-flex;

package/lib/components/card/YCard.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YCard.mjs","names":["defineComponent","h","withDirectives","ThemeClass","name","props","outline","type","Boolean","render","theme","class","$slots","default","call"],"sources":["../../../src/components/card/YCard.ts"],"sourcesContent":["import type { Directive, PropType, VNode } from \"vue\";\nimport { defineComponent, h, withDirectives } from 'vue';\n\nimport ThemeClass from '../../directives/theme-class';\nimport './YCard.scss';\n\nexport default defineComponent({\n  name: 'y-card',\n  props: {\n    outline: {\n      type: Boolean as PropType<boolean>,\n    },\n  },\n  render(): VNode {\n    const theme = ThemeClass as Directive;\n    return withDirectives(\n      h(\n        'div',\n        {\n          class: ['y-card'],\n        },\n        this.$slots.default?.call(this),\n      ),\n      [[theme]],\n    );\n  },\n});\n"],"mappings":"AACA,SAASA,eAAe,EAAEC,CAAC,EAAEC,cAAc,QAAQ,KAAK;AAAC,OAElDC,UAAU;AACjB;AAEA,eAAeH,eAAe,CAAC;EAC7BI,IAAI,EAAE,QAAQ;EACdC,KAAK,EAAE;IACLC,OAAO,EAAE;MACPC,IAAI,EAAEC;IACR;EACF,CAAC;EACDC,MAAMA,CAAA,EAAU;IACd,MAAMC,KAAK,GAAGP,UAAuB;IACrC,OAAOD,cAAc,CACnBD,CAAC,CACC,KAAK,EACL;MACEU,KAAK,EAAE,CAAC,QAAQ;IAClB,CAAC,EACD,IAAI,CAACC,MAAM,CAACC,OAAO,EAAEC,IAAI,CAAC,IAAI,CAChC,CAAC,EACD,CAAC,CAACJ,KAAK,CAAC,CACV,CAAC;EACH;AACF,CAAC,CAAC"}
+{"version":3,"file":"YCard.mjs","names":["defineComponent","h","withDirectives","ThemeClass","name","props","outline","type","Boolean","render","theme","class","$slots","default","call"],"sources":["../../../src/components/card/YCard.ts"],"sourcesContent":["import type { Directive, PropType, VNode } from 'vue';\nimport { defineComponent, h, withDirectives } from 'vue';\n\nimport ThemeClass from '../../directives/theme-class';\n\nimport './YCard.scss';\n\nexport default defineComponent({\n  name: 'y-card',\n  props: {\n    outline: {\n      type: Boolean as PropType<boolean>,\n    },\n  },\n  render(): VNode {\n    const theme = ThemeClass as Directive;\n    return withDirectives(\n      h(\n        'div',\n        {\n          class: ['y-card'],\n        },\n        this.$slots.default?.call(this),\n      ),\n      [[theme]],\n    );\n  },\n});\n"],"mappings":"AACA,SAASA,eAAe,EAAEC,CAAC,EAAEC,cAAc,QAAQ,KAAK;AAAC,OAElDC,UAAU;AAEjB;AAEA,eAAeH,eAAe,CAAC;EAC7BI,IAAI,EAAE,QAAQ;EACdC,KAAK,EAAE;IACLC,OAAO,EAAE;MACPC,IAAI,EAAEC;IACR;EACF,CAAC;EACDC,MAAMA,CAAA,EAAU;IACd,MAAMC,KAAK,GAAGP,UAAuB;IACrC,OAAOD,cAAc,CACnBD,CAAC,CACC,KAAK,EACL;MACEU,KAAK,EAAE,CAAC,QAAQ;IAClB,CAAC,EACD,IAAI,CAACC,MAAM,CAACC,OAAO,EAAEC,IAAI,CAAC,IAAI,CAChC,CAAC,EACD,CAAC,CAACJ,KAAK,CAAC,CACV,CAAC;EACH;AACF,CAAC,CAAC"}

package/lib/components/card/YCard.scss

@@ -6,9 +6,10 @@ $card__padding: 24px;
 
 .y-card {
   --y-card__border-radius: #{$card__border-radius};
-  --y-card__background: #fff;
+  --y-card__default-background: 255, 255, 255;
+  --y-card__background: var(--y-theme-surface, var(--y-card__default-background));
 
-  background-color: var(--y-card__background);
+  background-color: rgba(var(--y-card__background), 1);
   border-radius: var(--y-card__border-radius, $card__border-radius);
 
   &__header {

package/lib/components/checkbox/YInputCheckbox.scss

@@ -4,7 +4,7 @@ $checkbox__color: palette.$primary;
 $checkbox__border-color: #a4a4a4;
 
 .y-input--checkbox {
-  --y-checkbox__color: var(--y-theme--primary);
+  --y-checkbox__color: var(--y-theme-primary);
 
   position: relative;
   width: 24px;

package/lib/components/chip/YChip.mjs

@@ -1,8 +1,8 @@
 import { createVNode as _createVNode } from "vue";
 import { defineComponent } from 'vue';
 import { hasOwnProperty } from "../../util/common.mjs";
-import { colorHexToRgb } from "../../util/ui.mjs";
 import "./YChip.scss";
+import { rgbFromHex } from "../../util/color/index.mjs";
 export default defineComponent({
   name: 'y-chip',
   props: {
@@ -39,7 +39,7 @@ export default defineComponent({
   methods: {
     colorRgb(color) {
       if (color?.startsWith('#')) {
-        return colorHexToRgb(color)?.join(',') || '';
+        return rgbFromHex(color)?.join(',') || '';
       }
       const RGBA_REGEX = /rgb(a?)\((?<v>.*)\)/;
       if (RGBA_REGEX.test(color)) {

package/lib/components/chip/YChip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YChip.mjs","names":["defineComponent","hasOwnProperty","colorHexToRgb","name","props","color","String","background","small","Boolean","bgOpacity","type","Number","default","computed","clickable","$attrs","classes","backgroundColor","colorRgb","styles","methods","startsWith","join","RGBA_REGEX","test","value","exec","valueArray","trim","split","splice","render","_createVNode","$slots"],"sources":["../../../src/components/chip/YChip.tsx"],"sourcesContent":["import { defineComponent } from 'vue';\n\nimport { hasOwnProperty } from '../../util/common';\nimport { colorHexToRgb } from '../../util/ui';\n\nimport './YChip.scss';\n\nexport default defineComponent({\n  name: 'y-chip',\n  props: {\n    color: String,\n    background: String,\n    small: Boolean,\n    bgOpacity: {\n      type: Number,\n      default: 0.14,\n    },\n  },\n  computed: {\n    clickable() {\n      return hasOwnProperty(this.$attrs, 'onClick');\n    },\n    classes() {\n      return {\n        'y-chip': true,\n        'y-chip--small': this.small,\n        'y-chip--clickable': this.clickable,\n      };\n    },\n    backgroundColor() {\n      const color = (this.background as string) ?? this.color;\n      return this.colorRgb(color);\n    },\n    styles() {\n      return {\n        color: this.color,\n        background: `rgba(${this.backgroundColor}, ${this.bgOpacity})`,\n      };\n    },\n  },\n  methods: {\n    colorRgb(color: string): string {\n      if (color?.startsWith('#')) {\n        return colorHexToRgb(color)?.join(',') || '';\n      }\n      const RGBA_REGEX = /rgb(a?)\\((?<v>.*)\\)/;\n      if (RGBA_REGEX.test(color)) {\n        const value = RGBA_REGEX.exec(color)?.[2] || '';\n        if (value) {\n          const valueArray = value.trim().split(',');\n          valueArray.splice(3, 1);\n          return valueArray.join(',');\n        }\n      }\n      return '';\n    },\n  },\n  render() {\n    const { classes, styles } = this;\n    return (\n      <span class={classes} style={styles}>\n        <span class=\"y-chip__content\">\n          {this.$slots.default?.()}\n        </span>\n      </span>\n    );\n  },\n});\n"],"mappings":";AAAA,SAASA,eAAe,QAAQ,KAAK;AAAC,SAE7BC,cAAc;AAAA,SACdC,aAAa;AAEtB;AAEA,eAAeF,eAAe,CAAC;EAC7BG,IAAI,EAAE,QAAQ;EACdC,KAAK,EAAE;IACLC,KAAK,EAAEC,MAAM;IACbC,UAAU,EAAED,MAAM;IAClBE,KAAK,EAAEC,OAAO;IACdC,SAAS,EAAE;MACTC,IAAI,EAAEC,MAAM;MACZC,OAAO,EAAE;IACX;EACF,CAAC;EACDC,QAAQ,EAAE;IACRC,SAASA,CAAA,EAAG;MACV,OAAOd,cAAc,CAAC,IAAI,CAACe,MAAM,EAAE,SAAS,CAAC;IAC/C,CAAC;IACDC,OAAOA,CAAA,EAAG;MACR,OAAO;QACL,QAAQ,EAAE,IAAI;QACd,eAAe,EAAE,IAAI,CAACT,KAAK;QAC3B,mBAAmB,EAAE,IAAI,CAACO;MAC5B,CAAC;IACH,CAAC;IACDG,eAAeA,CAAA,EAAG;MAChB,MAAMb,KAAK,GAAI,IAAI,CAACE,UAAU,IAAe,IAAI,CAACF,KAAK;MACvD,OAAO,IAAI,CAACc,QAAQ,CAACd,KAAK,CAAC;IAC7B,CAAC;IACDe,MAAMA,CAAA,EAAG;MACP,OAAO;QACLf,KAAK,EAAE,IAAI,CAACA,KAAK;QACjBE,UAAU,EAAG,QAAO,IAAI,CAACW,eAAgB,KAAI,IAAI,CAACR,SAAU;MAC9D,CAAC;IACH;EACF,CAAC;EACDW,OAAO,EAAE;IACPF,QAAQA,CAACd,KAAa,EAAU;MAC9B,IAAIA,KAAK,EAAEiB,UAAU,CAAC,GAAG,CAAC,EAAE;QAC1B,OAAOpB,aAAa,CAACG,KAAK,CAAC,EAAEkB,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE;MAC9C;MACA,MAAMC,UAAU,GAAG,qBAAqB;MACxC,IAAIA,UAAU,CAACC,IAAI,CAACpB,KAAK,CAAC,EAAE;QAC1B,MAAMqB,KAAK,GAAGF,UAAU,CAACG,IAAI,CAACtB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE;QAC/C,IAAIqB,KAAK,EAAE;UACT,MAAME,UAAU,GAAGF,KAAK,CAACG,IAAI,CAAC,CAAC,CAACC,KAAK,CAAC,GAAG,CAAC;UAC1CF,UAAU,CAACG,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC;UACvB,OAAOH,UAAU,CAACL,IAAI,CAAC,GAAG,CAAC;QAC7B;MACF;MACA,OAAO,EAAE;IACX;EACF,CAAC;EACDS,MAAMA,CAAA,EAAG;IACP,MAAM;MAAEf,OAAO;MAAEG;IAAO,CAAC,GAAG,IAAI;IAChC,OAAAa,YAAA;MAAA,SACehB,OAAO;MAAA,SAASG;IAAM,IAAAa,YAAA;MAAA,SACrB;IAAiB,IAC1B,IAAI,CAACC,MAAM,CAACrB,OAAO,GAAG,CAAC;EAIhC;AACF,CAAC,CAAC"}
+{"version":3,"file":"YChip.mjs","names":["defineComponent","hasOwnProperty","rgbFromHex","name","props","color","String","background","small","Boolean","bgOpacity","type","Number","default","computed","clickable","$attrs","classes","backgroundColor","colorRgb","styles","methods","startsWith","join","RGBA_REGEX","test","value","exec","valueArray","trim","split","splice","render","_createVNode","$slots"],"sources":["../../../src/components/chip/YChip.tsx"],"sourcesContent":["import { defineComponent } from 'vue';\n\nimport { hasOwnProperty } from '../../util/common';\n\nimport './YChip.scss';\nimport { rgbFromHex } from \"../../util/color\";\n\nexport default defineComponent({\n  name: 'y-chip',\n  props: {\n    color: String,\n    background: String,\n    small: Boolean,\n    bgOpacity: {\n      type: Number,\n      default: 0.14,\n    },\n  },\n  computed: {\n    clickable() {\n      return hasOwnProperty(this.$attrs, 'onClick');\n    },\n    classes() {\n      return {\n        'y-chip': true,\n        'y-chip--small': this.small,\n        'y-chip--clickable': this.clickable,\n      };\n    },\n    backgroundColor() {\n      const color = (this.background as string) ?? this.color;\n      return this.colorRgb(color);\n    },\n    styles() {\n      return {\n        color: this.color,\n        background: `rgba(${this.backgroundColor}, ${this.bgOpacity})`,\n      };\n    },\n  },\n  methods: {\n    colorRgb(color: string): string {\n      if (color?.startsWith('#')) {\n        return rgbFromHex(color)?.join(',') || '';\n      }\n      const RGBA_REGEX = /rgb(a?)\\((?<v>.*)\\)/;\n      if (RGBA_REGEX.test(color)) {\n        const value = RGBA_REGEX.exec(color)?.[2] || '';\n        if (value) {\n          const valueArray = value.trim().split(',');\n          valueArray.splice(3, 1);\n          return valueArray.join(',');\n        }\n      }\n      return '';\n    },\n  },\n  render() {\n    const { classes, styles } = this;\n    return (\n      <span class={classes} style={styles}>\n        <span class=\"y-chip__content\">\n          {this.$slots.default?.()}\n        </span>\n      </span>\n    );\n  },\n});\n"],"mappings":";AAAA,SAASA,eAAe,QAAQ,KAAK;AAAC,SAE7BC,cAAc;AAEvB;AAAsB,SACbC,UAAU;AAEnB,eAAeF,eAAe,CAAC;EAC7BG,IAAI,EAAE,QAAQ;EACdC,KAAK,EAAE;IACLC,KAAK,EAAEC,MAAM;IACbC,UAAU,EAAED,MAAM;IAClBE,KAAK,EAAEC,OAAO;IACdC,SAAS,EAAE;MACTC,IAAI,EAAEC,MAAM;MACZC,OAAO,EAAE;IACX;EACF,CAAC;EACDC,QAAQ,EAAE;IACRC,SAASA,CAAA,EAAG;MACV,OAAOd,cAAc,CAAC,IAAI,CAACe,MAAM,EAAE,SAAS,CAAC;IAC/C,CAAC;IACDC,OAAOA,CAAA,EAAG;MACR,OAAO;QACL,QAAQ,EAAE,IAAI;QACd,eAAe,EAAE,IAAI,CAACT,KAAK;QAC3B,mBAAmB,EAAE,IAAI,CAACO;MAC5B,CAAC;IACH,CAAC;IACDG,eAAeA,CAAA,EAAG;MAChB,MAAMb,KAAK,GAAI,IAAI,CAACE,UAAU,IAAe,IAAI,CAACF,KAAK;MACvD,OAAO,IAAI,CAACc,QAAQ,CAACd,KAAK,CAAC;IAC7B,CAAC;IACDe,MAAMA,CAAA,EAAG;MACP,OAAO;QACLf,KAAK,EAAE,IAAI,CAACA,KAAK;QACjBE,UAAU,EAAG,QAAO,IAAI,CAACW,eAAgB,KAAI,IAAI,CAACR,SAAU;MAC9D,CAAC;IACH;EACF,CAAC;EACDW,OAAO,EAAE;IACPF,QAAQA,CAACd,KAAa,EAAU;MAC9B,IAAIA,KAAK,EAAEiB,UAAU,CAAC,GAAG,CAAC,EAAE;QAC1B,OAAOpB,UAAU,CAACG,KAAK,CAAC,EAAEkB,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE;MAC3C;MACA,MAAMC,UAAU,GAAG,qBAAqB;MACxC,IAAIA,UAAU,CAACC,IAAI,CAACpB,KAAK,CAAC,EAAE;QAC1B,MAAMqB,KAAK,GAAGF,UAAU,CAACG,IAAI,CAACtB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE;QAC/C,IAAIqB,KAAK,EAAE;UACT,MAAME,UAAU,GAAGF,KAAK,CAACG,IAAI,CAAC,CAAC,CAACC,KAAK,CAAC,GAAG,CAAC;UAC1CF,UAAU,CAACG,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC;UACvB,OAAOH,UAAU,CAACL,IAAI,CAAC,GAAG,CAAC;QAC7B;MACF;MACA,OAAO,EAAE;IACX;EACF,CAAC;EACDS,MAAMA,CAAA,EAAG;IACP,MAAM;MAAEf,OAAO;MAAEG;IAAO,CAAC,GAAG,IAAI;IAChC,OAAAa,YAAA;MAAA,SACehB,OAAO;MAAA,SAASG;IAAM,IAAAa,YAAA;MAAA,SACrB;IAAiB,IAC1B,IAAI,CAACC,MAAM,CAACrB,OAAO,GAAG,CAAC;EAIhC;AACF,CAAC,CAAC"}

package/lib/components/dialog/YDialog.mjs

@@ -16,7 +16,7 @@ export const YDialog = defineComponent({
     modelValue: {
       type: Boolean
     },
-    persistent: {
+    modal: {
       type: Boolean
     },
     dialogClasses: {
@@ -88,7 +88,7 @@ export const YDialog = defineComponent({
         "onUpdate:modelValue": $event => active.value = $event,
         "scrim": true,
         "classes": classes.value,
-        "persistent": props.persistent,
+        "modal": props.modal,
         "ref": layer
       }, {
         default: function () {

package/lib/components/dialog/YDialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YDialog.mjs","names":["computed","defineComponent","ref","watch","useRender","bindClasses","YCard","YLayer","useModelDuplex","YDialog","name","components","props","modelValue","type","Boolean","persistent","dialogClasses","Array","String","Object","disabled","emits","setup","_ref","emit","slots","active","classes","boundClasses","layer","onFocusin","e","prevTarget","relatedTarget","target","value","content$","document","includes","contains","focusableSelector","focusables","querySelectorAll","filter","el","hasAttribute","matches","length","firstChild","lastChild","focus","installFocusTrap","addEventListener","dismantleFocusTrap","removeEventListener","onUpdate","v","onClick","currentActive","baseEl","neo","old","immediate","_createVNode","_Fragment","$event","default","_len","arguments","args","_key","base"],"sources":["../../../src/components/dialog/YDialog.tsx"],"sourcesContent":["import type { PropType } from 'vue';\nimport { computed, defineComponent, ref, watch } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { bindClasses } from '../../util/vue-component';\nimport { YCard } from '../card';\nimport { YLayer } from '../layer';\n\nimport './YDialog.scss';\nimport { useModelDuplex } from \"../../composables/communication\";\n\nexport const YDialog = defineComponent({\n  name: 'YDialog',\n  components: {\n    YLayer,\n    YCard,\n  },\n  props: {\n    modelValue: {\n      type: Boolean as PropType<boolean>,\n    },\n    persistent: {\n      type: Boolean,\n    },\n    dialogClasses: {\n      type: [Array, String, Object] as PropType<\n        string[] | string | Record<string, any>\n      >,\n    },\n    disabled: Boolean,\n  },\n  emits: ['update:modelValue'],\n  setup(props, { emit, slots }) {\n    const active = useModelDuplex(props);\n\n    const classes = computed(() => {\n      const boundClasses = bindClasses(props.dialogClasses);\n      return {\n        ...boundClasses,\n        'y-dialog': true,\n      };\n    });\n\n    const layer = ref<typeof YLayer>();\n\n    function onFocusin(e: FocusEvent) {\n      const prevTarget = e.relatedTarget as HTMLElement | null;\n      const target = e.target as HTMLElement | null;\n      if (\n        prevTarget !== target &&\n        layer.value?.content$ &&\n        ![document, layer.value?.content$].includes(target) &&\n        !layer.value?.content$.contains(target)\n      ) {\n        const focusableSelector =\n          'button, [href], input:not([type=\"hidden\"]), select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n        const focusables = [\n          ...layer.value.content$.querySelectorAll(focusableSelector),\n        ].filter(\n          (el) =>\n            !el.hasAttribute('disabled') && !el.matches('[tabindex=\"-1\"]'),\n        ) as HTMLElement[];\n        if (!focusables.length) return;\n        const firstChild = focusables[0];\n        const lastChild = focusables[focusables.length - 1];\n        if (firstChild === lastChild) {\n          lastChild.focus();\n        } else {\n          firstChild.focus();\n        }\n      }\n    }\n\n    function installFocusTrap() {\n      document.addEventListener('focusin', onFocusin);\n    }\n\n    function dismantleFocusTrap() {\n      document.removeEventListener('focusin', onFocusin);\n    }\n\n    function onUpdate(v: boolean) {\n      active.value = v;\n    }\n\n    function onClick(e: MouseEvent) {\n      const currentActive = active.value;\n      if (!props.disabled) {\n        active.value = !currentActive;\n      }\n    }\n\n    watch(() => layer.value?.baseEl, (neo, old) => {\n      if (neo) {\n        neo.addEventListener('click', onClick);\n      } else if (old) {\n        old.removeEventListener('click', onClick);\n      }\n    });\n\n    watch(\n      () => active.value,\n      (neo) => {\n        neo ? installFocusTrap() : dismantleFocusTrap();\n      },\n      { immediate: true },\n    );\n\n    useRender(() => {\n      return (\n        <>\n          <YLayer\n            v-model={active.value}\n            scrim\n            classes={classes.value}\n            persistent={props.persistent}\n            ref={layer}\n          >\n            {{\n              default: (...args: any[]) => slots.default?.(...args),\n              base: slots.base\n            }}\n          </YLayer>\n        </>\n      );\n    });\n\n    return {\n      active,\n      layer,\n      classes,\n    };\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"YDialog.mjs","names":["computed","defineComponent","ref","watch","useRender","bindClasses","YCard","YLayer","useModelDuplex","YDialog","name","components","props","modelValue","type","Boolean","modal","dialogClasses","Array","String","Object","disabled","emits","setup","_ref","emit","slots","active","classes","boundClasses","layer","onFocusin","e","prevTarget","relatedTarget","target","value","content$","document","includes","contains","focusableSelector","focusables","querySelectorAll","filter","el","hasAttribute","matches","length","firstChild","lastChild","focus","installFocusTrap","addEventListener","dismantleFocusTrap","removeEventListener","onUpdate","v","onClick","currentActive","baseEl","neo","old","immediate","_createVNode","_Fragment","$event","default","_len","arguments","args","_key","base"],"sources":["../../../src/components/dialog/YDialog.tsx"],"sourcesContent":["import type { PropType } from 'vue';\nimport { computed, defineComponent, ref, watch } from 'vue';\n\nimport { useRender } from '../../composables/component';\nimport { bindClasses } from '../../util/vue-component';\nimport { YCard } from '../card';\nimport { YLayer } from '../layer';\n\nimport './YDialog.scss';\nimport { useModelDuplex } from \"../../composables/communication\";\n\nexport const YDialog = defineComponent({\n  name: 'YDialog',\n  components: {\n    YLayer,\n    YCard,\n  },\n  props: {\n    modelValue: {\n      type: Boolean as PropType<boolean>,\n    },\n    modal: {\n      type: Boolean,\n    },\n    dialogClasses: {\n      type: [Array, String, Object] as PropType<\n        string[] | string | Record<string, any>\n      >,\n    },\n    disabled: Boolean,\n  },\n  emits: ['update:modelValue'],\n  setup(props, { emit, slots }) {\n    const active = useModelDuplex(props);\n\n    const classes = computed(() => {\n      const boundClasses = bindClasses(props.dialogClasses);\n      return {\n        ...boundClasses,\n        'y-dialog': true,\n      };\n    });\n\n    const layer = ref<typeof YLayer>();\n\n    function onFocusin(e: FocusEvent) {\n      const prevTarget = e.relatedTarget as HTMLElement | null;\n      const target = e.target as HTMLElement | null;\n      if (\n        prevTarget !== target &&\n        layer.value?.content$ &&\n        ![document, layer.value?.content$].includes(target) &&\n        !layer.value?.content$.contains(target)\n      ) {\n        const focusableSelector =\n          'button, [href], input:not([type=\"hidden\"]), select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n        const focusables = [\n          ...layer.value.content$.querySelectorAll(focusableSelector),\n        ].filter(\n          (el) =>\n            !el.hasAttribute('disabled') && !el.matches('[tabindex=\"-1\"]'),\n        ) as HTMLElement[];\n        if (!focusables.length) return;\n        const firstChild = focusables[0];\n        const lastChild = focusables[focusables.length - 1];\n        if (firstChild === lastChild) {\n          lastChild.focus();\n        } else {\n          firstChild.focus();\n        }\n      }\n    }\n\n    function installFocusTrap() {\n      document.addEventListener('focusin', onFocusin);\n    }\n\n    function dismantleFocusTrap() {\n      document.removeEventListener('focusin', onFocusin);\n    }\n\n    function onUpdate(v: boolean) {\n      active.value = v;\n    }\n\n    function onClick(e: MouseEvent) {\n      const currentActive = active.value;\n      if (!props.disabled) {\n        active.value = !currentActive;\n      }\n    }\n\n    watch(() => layer.value?.baseEl, (neo, old) => {\n      if (neo) {\n        neo.addEventListener('click', onClick);\n      } else if (old) {\n        old.removeEventListener('click', onClick);\n      }\n    });\n\n    watch(\n      () => active.value,\n      (neo) => {\n        neo ? installFocusTrap() : dismantleFocusTrap();\n      },\n      { immediate: true },\n    );\n\n    useRender(() => {\n      return (\n        <>\n          <YLayer\n            v-model={active.value}\n            scrim\n            classes={classes.value}\n            modal={props.modal}\n            ref={layer}\n          >\n            {{\n              default: (...args: any[]) => slots.default?.(...args),\n              base: slots.base\n            }}\n          </YLayer>\n        </>\n      );\n    });\n\n    return {\n      active,\n      layer,\n      classes,\n    };\n  },\n});\n"],"mappings":"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"}

package/lib/components/dropdown/YDropdown.mjs

@@ -1,7 +1,88 @@
+import { createTextVNode as _createTextVNode, mergeProps as _mergeProps, createVNode as _createVNode, Fragment as _Fragment } from "vue";
 import { defineComponent } from 'vue';
+import { pressItemsPropsOptions } from "../../abstract/items.mjs";
+import { useModelDuplex } from "../../composables/communication.mjs";
+import { useRender } from "../../composables/component.mjs";
+import { pressCoordinateProps } from "../../composables/coordinate/index.mjs";
+import { getObjectValueByPath, omit } from "../../util/common.mjs";
 import { propsFactory } from "../../util/vue-component.mjs";
-export const pressYDropdownPropsOptions = propsFactory({}, 'YDropdown');
+import { YButton } from "../button/index.mjs";
+import { YCard } from "../card/index.mjs";
+import { YIconDropdown } from "../icons/YIconDropdown.mjs";
+import { YList, YListItem } from "../list/index.mjs";
+import { YMenu } from "../menu/index.mjs";
+import "./YDropdown.scss";
+export const pressYDropdownPropsOptions = propsFactory({
+  modelValue: Boolean,
+  variation: String,
+  color: String,
+  ...omit(pressCoordinateProps({
+    position: 'bottom'
+  }), ['coordinateStrategy']),
+  ...pressItemsPropsOptions()
+}, 'YDropdown');
 export const YDropdown = defineComponent({
-  name: 'YDropdown'
+  name: 'YDropdown',
+  inheritAttrs: false,
+  components: {
+    YMenu
+  },
+  props: {
+    ...pressYDropdownPropsOptions()
+  },
+  emits: ['update:modelValue', 'click'],
+  setup(props, _ref) {
+    let {
+      slots,
+      attrs,
+      emit
+    } = _ref;
+    const opened = useModelDuplex(props);
+    function onClickItem(item) {
+      opened.value = false;
+      emit('click', item);
+    }
+    useRender(() => {
+      return _createVNode(_Fragment, null, [_createVNode(YMenu, {
+        "modelValue": opened.value,
+        "onUpdate:modelValue": $event => opened.value = $event,
+        "position": props.position,
+        "content-classes": ['y-dropdown__content']
+      }, {
+        base: function () {
+          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+          }
+          return slots.base ? slots.base?.(...args) : _createVNode(YButton, _mergeProps({
+            "variation": props.variation,
+            "color": props.color,
+            "class": ['y-dropdown', {
+              'y-dropdown--opened': opened.value
+            }]
+          }, attrs), {
+            default: () => [_createVNode("span", {
+              "class": "y-dropdown__default"
+            }, [slots.default?.()]), slots['expand-icon'] ? slots['expand-icon']() : _createVNode("i", {
+              "class": "y-dropdown__icon"
+            }, [_createVNode(YIconDropdown, null, null)])]
+          });
+        },
+        default: () => slots.menu ? slots.menu() : _createVNode(YCard, null, {
+          default: () => [Array.isArray(props.items) && props.items.length > 0 ? _createVNode(YList, null, {
+            default: () => [props.items.map(item => {
+              const text = getObjectValueByPath(item, props.itemText);
+              return _createVNode(YListItem, {
+                "onClick": e => onClickItem(item)
+              }, {
+                default: () => [text]
+              });
+            })]
+          }) : _createVNode("div", {
+            "class": "pa-4"
+          }, [_createTextVNode("\uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4.")])]
+        })
+      })]);
+    });
+  }
 });
 //# sourceMappingURL=YDropdown.mjs.map

package/lib/components/dropdown/YDropdown.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YDropdown.mjs","names":["defineComponent","propsFactory","pressYDropdownPropsOptions","YDropdown","name"],"sources":["../../../src/components/dropdown/YDropdown.tsx"],"sourcesContent":["import { defineComponent } from 'vue';\nimport { propsFactory } from \"../../util/vue-component\";\n\nexport const pressYDropdownPropsOptions = propsFactory({}, 'YDropdown');\n\nexport const YDropdown = defineComponent({\n  name: 'YDropdown',\n});\n"],"mappings":"AAAA,SAASA,eAAe,QAAQ,KAAK;AAAC,SAC7BC,YAAY;AAErB,OAAO,MAAMC,0BAA0B,GAAGD,YAAY,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC;AAEvE,OAAO,MAAME,SAAS,GAAGH,eAAe,CAAC;EACvCI,IAAI,EAAE;AACR,CAAC,CAAC"}
+{"version":3,"file":"YDropdown.mjs","names":["defineComponent","pressItemsPropsOptions","useModelDuplex","useRender","pressCoordinateProps","getObjectValueByPath","omit","propsFactory","YButton","YCard","YIconDropdown","YList","YListItem","YMenu","pressYDropdownPropsOptions","modelValue","Boolean","variation","String","color","position","YDropdown","name","inheritAttrs","components","props","emits","setup","_ref","slots","attrs","emit","opened","onClickItem","item","value","_createVNode","_Fragment","$event","base","_len","arguments","length","args","Array","_key","_mergeProps","default","menu","isArray","items","map","text","itemText","e","_createTextVNode"],"sources":["../../../src/components/dropdown/YDropdown.tsx"],"sourcesContent":["import { PropType, defineComponent } from 'vue';\n\nimport { pressItemsPropsOptions } from '../../abstract/items';\nimport { useModelDuplex } from '../../composables/communication';\nimport { useRender } from '../../composables/component';\nimport { pressCoordinateProps } from '../../composables/coordinate';\nimport { getObjectValueByPath, omit } from '../../util/common';\nimport { propsFactory } from '../../util/vue-component';\nimport { YButton } from '../button';\nimport { YCard } from '../card';\nimport { YIconDropdown } from '../icons/YIconDropdown';\nimport { YList, YListItem } from '../list';\nimport { YMenu } from '../menu';\n\nimport './YDropdown.scss';\n\nexport const pressYDropdownPropsOptions = propsFactory(\n  {\n    modelValue: Boolean as PropType<boolean>,\n    variation: String as PropType<string>,\n    color: String as PropType<string>,\n    ...omit(pressCoordinateProps({ position: 'bottom' as 'bottom' }), [\n      'coordinateStrategy',\n    ]),\n    ...pressItemsPropsOptions(),\n  },\n  'YDropdown',\n);\n\nexport const YDropdown = defineComponent({\n  name: 'YDropdown',\n  inheritAttrs: false,\n  components: {\n    YMenu,\n  },\n  props: {\n    ...pressYDropdownPropsOptions(),\n  },\n  emits: ['update:modelValue', 'click'],\n  setup(props, { slots, attrs, emit }) {\n    const opened = useModelDuplex(props);\n\n    function onClickItem(item: any) {\n      opened.value = false;\n      emit('click', item);\n    }\n\n    useRender(() => {\n      return (\n        <>\n          <YMenu\n            v-model={opened.value}\n            position={props.position}\n            content-classes={['y-dropdown__content']}\n          >\n            {{\n              base: (...args: any[]) =>\n                slots.base ? (\n                  slots.base?.(...args)\n                ) : (\n                  <YButton\n                    variation={props.variation}\n                    color={props.color}\n                    class={[\n                      'y-dropdown',\n                      { 'y-dropdown--opened': opened.value },\n                    ]}\n                    {...attrs}\n                  >\n                    {\n                      <span class=\"y-dropdown__default\">\n                        {slots.default?.()}\n                      </span>\n                    }\n                    {slots['expand-icon'] ? (\n                      slots['expand-icon']()\n                    ) : (\n                      <i class=\"y-dropdown__icon\">\n                        <YIconDropdown></YIconDropdown>\n                      </i>\n                    )}\n                  </YButton>\n                ),\n              default: () =>\n                slots.menu ? (\n                  slots.menu()\n                ) : (\n                  <YCard>\n                    {Array.isArray(props.items) && props.items.length > 0 ? (\n                      <YList>\n                        {props.items.map((item) => {\n                          const text = getObjectValueByPath(\n                            item,\n                            props.itemText,\n                          );\n                          return (\n                            <YListItem onClick={(e) => onClickItem(item)}>\n                              {text}\n                            </YListItem>\n                          );\n                        })}\n                      </YList>\n                    ) : (\n                      <div class=\"pa-4\">항목이 없습니다.</div>\n                    )}\n                  </YCard>\n                ),\n            }}\n          </YMenu>\n        </>\n      );\n    });\n  },\n});\n"],"mappings":";AAAA,SAAmBA,eAAe,QAAQ,KAAK;AAAC,SAEvCC,sBAAsB;AAAA,SACtBC,cAAc;AAAA,SACdC,SAAS;AAAA,SACTC,oBAAoB;AAAA,SACpBC,oBAAoB,EAAEC,IAAI;AAAA,SAC1BC,YAAY;AAAA,SACZC,OAAO;AAAA,SACPC,KAAK;AAAA,SACLC,aAAa;AAAA,SACbC,KAAK,EAAEC,SAAS;AAAA,SAChBC,KAAK;AAEd;AAEA,OAAO,MAAMC,0BAA0B,GAAGP,YAAY,CACpD;EACEQ,UAAU,EAAEC,OAA4B;EACxCC,SAAS,EAAEC,MAA0B;EACrCC,KAAK,EAAED,MAA0B;EACjC,GAAGZ,IAAI,CAACF,oBAAoB,CAAC;IAAEgB,QAAQ,EAAE;EAAqB,CAAC,CAAC,EAAE,CAChE,oBAAoB,CACrB,CAAC;EACF,GAAGnB,sBAAsB,CAAC;AAC5B,CAAC,EACD,WACF,CAAC;AAED,OAAO,MAAMoB,SAAS,GAAGrB,eAAe,CAAC;EACvCsB,IAAI,EAAE,WAAW;EACjBC,YAAY,EAAE,KAAK;EACnBC,UAAU,EAAE;IACVX;EACF,CAAC;EACDY,KAAK,EAAE;IACL,GAAGX,0BAA0B,CAAC;EAChC,CAAC;EACDY,KAAK,EAAE,CAAC,mBAAmB,EAAE,OAAO,CAAC;EACrCC,KAAKA,CAACF,KAAK,EAAAG,IAAA,EAA0B;IAAA,IAAxB;MAAEC,KAAK;MAAEC,KAAK;MAAEC;IAAK,CAAC,GAAAH,IAAA;IACjC,MAAMI,MAAM,GAAG9B,cAAc,CAACuB,KAAK,CAAC;IAEpC,SAASQ,WAAWA,CAACC,IAAS,EAAE;MAC9BF,MAAM,CAACG,KAAK,GAAG,KAAK;MACpBJ,IAAI,CAAC,OAAO,EAAEG,IAAI,CAAC;IACrB;IAEA/B,SAAS,CAAC,MAAM;MACd,OAAAiC,YAAA,CAAAC,SAAA,SAAAD,YAAA,CAAAvB,KAAA;QAAA,cAGemB,MAAM,CAACG,KAAK;QAAA,uBAAAG,MAAA,IAAZN,MAAM,CAACG,KAAK,GAAAG,MAAA;QAAA,YACXb,KAAK,CAACL,QAAQ;QAAA,mBACP,CAAC,qBAAqB;MAAC;QAGtCmB,IAAI,EAAE,SAAAA,CAAA;UAAA,SAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAIC,IAAI,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;YAAJF,IAAI,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA;UAAA;UAAA,OACZhB,KAAK,CAACU,IAAI,GACRV,KAAK,CAACU,IAAI,GAAG,GAAGI,IAAI,CAAC,GAAAP,YAAA,CAAA5B,OAAA,EAAAsC,WAAA;YAAA,aAGRrB,KAAK,CAACR,SAAS;YAAA,SACnBQ,KAAK,CAACN,KAAK;YAAA,SACX,CACL,YAAY,EACZ;cAAE,oBAAoB,EAAEa,MAAM,CAACG;YAAM,CAAC;UACvC,GACGL,KAAK;YAAAiB,OAAA,EAAAA,CAAA,MAAAX,YAAA;cAAA,SAGK;YAAqB,IAC9BP,KAAK,CAACkB,OAAO,GAAG,CAAC,IAGrBlB,KAAK,CAAC,aAAa,CAAC,GACnBA,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,GAAAO,YAAA;cAAA,SAEb;YAAkB,IAAAA,YAAA,CAAA1B,aAAA,eAG5B;UAAA,EAEJ;QAAA;QACHqC,OAAO,EAAEA,CAAA,KACPlB,KAAK,CAACmB,IAAI,GACRnB,KAAK,CAACmB,IAAI,CAAC,CAAC,GAAAZ,YAAA,CAAA3B,KAAA;UAAAsC,OAAA,EAAAA,CAAA,MAGTH,KAAK,CAACK,OAAO,CAACxB,KAAK,CAACyB,KAAK,CAAC,IAAIzB,KAAK,CAACyB,KAAK,CAACR,MAAM,GAAG,CAAC,GAAAN,YAAA,CAAAzB,KAAA;YAAAoC,OAAA,EAAAA,CAAA,MAEhDtB,KAAK,CAACyB,KAAK,CAACC,GAAG,CAAEjB,IAAI,IAAK;cACzB,MAAMkB,IAAI,GAAG/C,oBAAoB,CAC/B6B,IAAI,EACJT,KAAK,CAAC4B,QACR,CAAC;cACD,OAAAjB,YAAA,CAAAxB,SAAA;gBAAA,WACuB0C,CAAC,IAAKrB,WAAW,CAACC,IAAI;cAAC;gBAAAa,OAAA,EAAAA,CAAA,MACzCK,IAAI;cAAA;YAGX,CAAC,CAAC;UAAA,KAAAhB,YAAA;YAAA,SAGO;UAAM,IAAAmB,gBAAA,kDAClB;QAAA;MAEJ;IAKb,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}

package/lib/components/dropdown/YDropdown.scss

@@ -0,0 +1,33 @@
+.y-dropdown {
+  .y-button__content {
+    width: 100%;
+  }
+
+  &__default {
+    flex-grow: 1;
+    text-align: left;
+  }
+
+  &__icon {
+    transition: 200ms ease;
+    width: 1.5em;
+    height: 1.5em;
+
+    > svg {
+      width: 1.5em;
+      height: 1.5em;
+    }
+  }
+
+  &--opened &__icon {
+    transform: rotate3d(1, 0, 0, 180deg) translateY(0.1em);
+  }
+
+
+  &__content {
+    > .y-card {
+      padding-top: 8px;
+      padding-bottom: 8px;
+    }
+  }
+}

package/lib/components/field-input/YFieldInput.mjs

@@ -1,26 +1,34 @@
 import { computed, defineComponent, getCurrentInstance, h, nextTick, ref, toRef, watch } from 'vue';
+import { useRender } from "../../composables/component.mjs";
+import { useFocus } from "../../composables/focus.mjs";
+import { chooseProps, propsFactory } from "../../util/vue-component.mjs";
 import { YIconClear } from "../icons/YIconClear.mjs";
-import { YInput, YInputProps } from "../input/index.mjs";
+import { YInput, pressYInputPropsOptions } from "../input/index.mjs";
 import "./YFieldInput.scss";
 const NAME = 'y-field-input';
+export const pressYFieldInputPropsOptions = propsFactory({
+  enableClear: Boolean,
+  inputAlign: String,
+  displayText: [String, Function],
+  whenInputValid: [Boolean, Number],
+  tabindex: {
+    type: String,
+    default: '0'
+  },
+  type: {
+    type: String,
+    default: 'text'
+  },
+  ...pressYInputPropsOptions({
+    variation: 'filled'
+  })
+}, 'YFieldInput');
 export const YFieldInput = defineComponent({
   name: 'YFieldInput',
   props: {
-    ...YInputProps,
-    clearable: Boolean,
-    inputAlign: String,
-    displayText: [String, Function],
-    whenInputValid: [Boolean, Number],
-    tabindex: {
-      type: String,
-      default: '0'
-    },
-    type: {
-      type: String,
-      default: 'text'
-    }
+    ...pressYFieldInputPropsOptions()
   },
-  emits: ['update:modelValue', 'input', 'change', 'click', 'mousedown', 'mouseup', 'keydown', 'keyup', 'focus', 'blur'],
+  emits: ['update:modelValue', 'update:focused', 'input', 'change', 'click', 'mousedown', 'mouseup', 'keydown', 'keyup', 'focus', 'blur', 'mousedown:display'],
   setup(props, _ref) {
     let {
       attrs,
@@ -30,14 +38,16 @@ export const YFieldInput = defineComponent({
     } = _ref;
     const yInputRef = ref();
     const inputRef = ref();
-    const isFocused = ref(false);
+    const {
+      focused,
+      whenFocus,
+      whenBlur
+    } = useFocus(props, 'y-field-input');
     const inValue = ref('');
     const displayValue = ref('');
     const inputType = toRef(props, 'type');
     const classes = computed(() => {
       return {
-        ...(yInputRef.value?.classes || {}),
-        'y-input--focused': isFocused.value,
         [NAME]: true
       };
     });
@@ -49,12 +59,12 @@ export const YFieldInput = defineComponent({
       emit('click', event);
     }
     function onFocus(event) {
-      isFocused.value = true;
+      whenFocus();
       displayValue.value = inValue.value;
       emit('focus', event);
     }
     function onBlur(event) {
-      isFocused.value = false;
+      whenBlur();
       invokeValidators();
       emit('blur', event);
       changeDisplay();
@@ -121,7 +131,7 @@ export const YFieldInput = defineComponent({
       immediate: true
     });
     watch(inValue, neo => {
-      if (!isFocused.value) {
+      if (!focused.value) {
         changeDisplay();
       } else {
         displayValue.value = neo;
@@ -133,42 +143,37 @@ export const YFieldInput = defineComponent({
       clear,
       inputRef
     });
-    const yInputProps = () => {
-      const ret = {};
-      for (const propKey in YInputProps) {
-        ret[propKey] = props[propKey];
-      }
-      return ret;
-    };
     function onUpdateModel(value) {
       emit('update:modelValue', value);
     }
-    return () => h(YInput, {
+    useRender(() => h(YInput, {
       class: classes.value,
       ref: yInputRef,
-      ...yInputProps(),
+      ...chooseProps(props, YInput.props),
       modelValue: inValue.value,
       'onUpdate:modelValue': onUpdateModel,
-      onClick
+      onClick,
+      focused: focused.value,
+      'onMousedown:display': $event => emit('mousedown:display', $event)
     }, {
-      prepend: slots.prepend ? function () {
-        const prepends = [];
+      leading: slots.leading ? function () {
+        const leadingChildren = [];
         for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
           args[_key] = arguments[_key];
         }
-        const slot = slots.prepend?.(...args);
+        const slot = slots.leading?.(...args);
         if (slot) {
-          prepends.push(slot);
+          leadingChildren.push(slot);
         } else {
           return undefined;
         }
-        return prepends;
+        return leadingChildren;
       } : undefined,
       default: defaultProps => h('div', {
         class: `${NAME}__field`,
         'data-id': defaultProps.attrId,
         ref: 'field'
-      }, [YInput.methods.createLabel.call(yInputRef), h('input', {
+      }, [YInput.methods.createLabel.call(yInputRef), slots.default?.(), h('input', {
         '.value': displayValue.value,
         '.id': defaultProps.attrId,
         '^type': inputType.value,
@@ -189,11 +194,11 @@ export const YFieldInput = defineComponent({
         },
         ref: inputRef
       })]),
-      append: () => {
-        const appends = [];
-        if (props.clearable && inValue.value) {
-          appends.push(h('div', {
-            class: 'y-input__append y-input__append--clear'
+      trailing: () => {
+        const trailingChildren = [];
+        if (props.enableClear && inValue.value) {
+          trailingChildren.push(h('div', {
+            class: 'y-input__trailing y-input__trailing--clear'
           }, [h('button', {
             class: `${NAME}__clear`,
             onClick: onClickClear,
@@ -201,18 +206,21 @@ export const YFieldInput = defineComponent({
             '^tabindex': '2'
           }, [h(YIconClear)])]));
         }
-        const slot = slots.append;
+        const slot = slots.trailing;
         if (slot) {
-          appends.push(h('div', {
-            class: 'y-input__append'
+          trailingChildren.push(h('div', {
+            class: 'y-input__trailing'
           }, slot()));
         }
-        return appends;
+        return trailingChildren;
       },
       'helper-text': () => {
         return slots['helper-text']?.();
       }
-    });
+    }));
+    return {
+      focused
+    };
   }
 });
 //# sourceMappingURL=YFieldInput.mjs.map