yuyeon 0.3.1-rc.4 → 0.3.1-rc.5

package/lib/components/switch/YSwitch.scss

@@ -1,211 +1,211 @@
-@use '../../styles/variables';
-
-.y-switch {
-  --y-switch__color: var(--y-theme-primary);
-  --y-switch__color-rgb: var(--y-theme-primary-rgb);
-  font-size: 1rem;
-
-  &__slot {
-    display: flex;
-    cursor: pointer;
-    align-items: center;
-    color: inherit;
-    min-height: inherit;
-    position: relative;
-  }
-
-  &__input {
-    width: 3em;
-    height: 1.5em;
-    position: relative;
-    display: inline-flex;
-    user-select: none;
-    color: inherit;
-    flex: 0 0 auto;
-
-    input[role='switch'] {
-      position: absolute;
-      opacity: 0;
-      width: 100%;
-      height: 100%;
-      cursor: pointer;
-      user-select: none;
-    }
-  }
-
-  &:not(&--loading) &__input:active &__thumb {
-    transform: scaleX(0.94);
-    transform-origin: left;
-  }
-
-  &.y-switch--active:not(&--loading) &__input:active &__thumb {
-    transform-origin: right;
-  }
-
-  &__track {
-    width: 100%;
-    height: 100%;
-    border-radius: 2em;
-    background-color: var(--y-theme-surface-variant);
-    position: absolute;
-    left: 0;
-    top: 0;
-    transition: 300ms;
-  }
-
-  &__thumb {
-    width: 1.1em;
-    height: 1.1em;
-    align-self: center;
-    left: 0.185em;
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: var(--y-theme-surface);
-    pointer-events: none;
-    position: relative;
-    transition: 180ms cubic-bezier(0.78, 0.04, 0.9, 0.18);
-    will-change: left, transform;
-  }
-
-  &__spinner {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    animation: rotate 2s linear infinite;
-    contain: paint;
-
-    @keyframes spinner-blur {
-      0% {
-        filter: blur(4px);
-      }
-      50% {
-        filter: blur(1px);
-      }
-      100% {
-        filter: blur(4px);
-      }
-    }
-
-    &:before {
-      content: '';
-      position: absolute;
-      top: 2px;
-      left: 2px;
-      right: 2px;
-      bottom: 2px;
-      border-radius: 50%;
-      border-width: 2px 2px 0 0;
-      border-style: solid;
-      border-color: var(--y-switch__color) transparent;
-    }
-
-    &:after {
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      background: linear-gradient(
-        0deg,
-        transparent 60%,
-        rgba(var(--y-switch__color), 0.4)
-      );
-      filter: blur(4px);
-      animation: spinner-blur 3s infinite;
-    }
-  }
-
-  &--active {
-    .y-switch__track {
-      background-color: var(--y-switch__color);
-    }
-
-    .y-switch__thumb {
-      left: calc(100% - 1.1em - 0.24em);
-    }
-  }
-
-  &--active:not(&--loading):active &__thumb {
-    left: 1.8em;
-  }
-
-  &--focused {
-    .y-switch__thumb:before {
-      content: '';
-      position: absolute;
-      top: 2px;
-      bottom: 2px;
-      left: 2px;
-      right: 2px;
-      border-radius: 50%;
-      background-color: rgba(var(--y-switch__color-rgb), 0.4);
-    }
-  }
-
-  &--stick-out {
-    .y-switch__thumb {
-      box-shadow:
-        2px 2px 5px -2px rgba(var(--y-theme-shadow-rgb, 0, 0, 0), 0.54),
-        1px 1px 4px rgba(var(--y-theme-shadow-rgb, 0, 0, 0), 0.12),
-        0 0 0 1px rgba(var(--y-theme-shadow-rgb, 0, 0, 0), 0.08);
-    }
-
-    .y-switch__track {
-      width: 80%;
-      height: 74%;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      box-shadow: inset 0 0 4px -1px rgba(var(--y-theme-shadow-rgb, 0, 0, 0), 0.34);
-    }
-  }
-
-  &--disabled {
-    opacity: 0.8;
-    filter: brightness(0.88);
-
-    .y-switch__thumb {
-      opacity: 0.4;
-    }
-  }
-  &--disabled &__slot,
-  &--disabled &__input input {
-    cursor: default;
-  }
-
-  &__state {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    contain: content;
-  }
-
-  &__state-label {
-    font-size: 12px;
-    color: var(--y-theme-on-primary);
-    position: absolute;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    transition: transform 180ms cubic-bezier(0.16, 0.85, 0.36, 0.96);
-
-    &--on {
-      left: -40px;
-    }
-    &--off {
-      right: 10px;
-    }
-  }
-
-  &--active &__state-label {
-    transform: translateX(50px);
-  }
-
-  &--stick-out &__state-label--off {
-    right: 7px;
-  }
-}
+@use '../../styles/variables';
+
+.y-switch {
+  --y-switch__color: var(--y-theme-primary);
+  --y-switch__color-rgb: var(--y-theme-primary-rgb);
+  font-size: 1rem;
+
+  &__slot {
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    color: inherit;
+    min-height: inherit;
+    position: relative;
+  }
+
+  &__input {
+    width: 3em;
+    height: 1.5em;
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    color: inherit;
+    flex: 0 0 auto;
+
+    input[role='switch'] {
+      position: absolute;
+      opacity: 0;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+      user-select: none;
+    }
+  }
+
+  &:not(&--loading) &__input:active &__thumb {
+    transform: scaleX(0.94);
+    transform-origin: left;
+  }
+
+  &.y-switch--active:not(&--loading) &__input:active &__thumb {
+    transform-origin: right;
+  }
+
+  &__track {
+    width: 100%;
+    height: 100%;
+    border-radius: 2em;
+    background-color: var(--y-theme-surface-variant);
+    position: absolute;
+    left: 0;
+    top: 0;
+    transition: 300ms;
+  }
+
+  &__thumb {
+    width: 1.1em;
+    height: 1.1em;
+    align-self: center;
+    left: 0.185em;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--y-theme-surface);
+    pointer-events: none;
+    position: relative;
+    transition: 180ms cubic-bezier(0.78, 0.04, 0.9, 0.18);
+    will-change: left, transform;
+  }
+
+  &__spinner {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    animation: rotate 2s linear infinite;
+    contain: paint;
+
+    @keyframes spinner-blur {
+      0% {
+        filter: blur(4px);
+      }
+      50% {
+        filter: blur(1px);
+      }
+      100% {
+        filter: blur(4px);
+      }
+    }
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      right: 2px;
+      bottom: 2px;
+      border-radius: 50%;
+      border-width: 2px 2px 0 0;
+      border-style: solid;
+      border-color: var(--y-switch__color) transparent;
+    }
+
+    &:after {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      background: linear-gradient(
+        0deg,
+        transparent 60%,
+        rgba(var(--y-switch__color), 0.4)
+      );
+      filter: blur(4px);
+      animation: spinner-blur 3s infinite;
+    }
+  }
+
+  &--active {
+    .y-switch__track {
+      background-color: var(--y-switch__color);
+    }
+
+    .y-switch__thumb {
+      left: calc(100% - 1.1em - 0.24em);
+    }
+  }
+
+  &--active:not(&--loading):active &__thumb {
+    left: 1.8em;
+  }
+
+  &--focused {
+    .y-switch__thumb:before {
+      content: '';
+      position: absolute;
+      top: 2px;
+      bottom: 2px;
+      left: 2px;
+      right: 2px;
+      border-radius: 50%;
+      background-color: rgba(var(--y-switch__color-rgb), 0.4);
+    }
+  }
+
+  &--stick-out {
+    .y-switch__thumb {
+      box-shadow:
+        2px 2px 5px -2px rgba(var(--y-theme-shadow-rgb, 0, 0, 0), 0.54),
+        1px 1px 4px rgba(var(--y-theme-shadow-rgb, 0, 0, 0), 0.12),
+        0 0 0 1px rgba(var(--y-theme-shadow-rgb, 0, 0, 0), 0.08);
+    }
+
+    .y-switch__track {
+      width: 80%;
+      height: 74%;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      box-shadow: inset 0 0 4px -1px rgba(var(--y-theme-shadow-rgb, 0, 0, 0), 0.34);
+    }
+  }
+
+  &--disabled {
+    opacity: 0.8;
+    filter: brightness(0.88);
+
+    .y-switch__thumb {
+      opacity: 0.4;
+    }
+  }
+  &--disabled &__slot,
+  &--disabled &__input input {
+    cursor: default;
+  }
+
+  &__state {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    contain: content;
+  }
+
+  &__state-label {
+    font-size: 12px;
+    color: var(--y-theme-on-primary);
+    position: absolute;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    transition: transform 180ms cubic-bezier(0.16, 0.85, 0.36, 0.96);
+
+    &--on {
+      left: -40px;
+    }
+    &--off {
+      right: 10px;
+    }
+  }
+
+  &--active &__state-label {
+    transform: translateX(50px);
+  }
+
+  &--stick-out &__state-label--off {
+    right: 7px;
+  }
+}

package/lib/components/tab/YTab.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YTab.mjs","names":["computed","ref","shallowRef","useRender","chooseProps","defineComponent","propsFactory","YButton","pressYButtonProps","Y_TABS_KEY","pressYTabPropsOptions","text","String","hideIndicator","Boolean","indicatorColor","selectedClass","noWave","YTab","name","props","slots","Object","setup","_ref","attrs","selected","indicator$","indicatorStyles","attrsProps","role","value","tabindex","onChoice","_ref2","yButtonProps","_createVNode","_mergeProps","default","append"],"sources":["../../../src/components/tab/YTab.tsx"],"sourcesContent":["import { type PropType, type SlotsType, computed, ref, shallowRef } from 'vue';\n\nimport { useRender } from '@/composables/component';\nimport { chooseProps, defineComponent, propsFactory } from '@/util/component';\n\nimport { YButton, pressYButtonProps } from '../button';\nimport { Y_TABS_KEY } from './shared';\n\nimport './YTab.scss';\n\nexport const pressYTabPropsOptions = propsFactory(\n  {\n    text: String as PropType<string>,\n    hideIndicator: Boolean as PropType<boolean>,\n    indicatorColor: String as PropType<string>,\n    ...pressYButtonProps({\n      selectedClass: 'y-tab--selected',\n      noWave: true,\n    }),\n  },\n  'YTab',\n);\n\nexport const YTab = defineComponent({\n  name: 'YTab',\n  props: pressYTabPropsOptions(),\n  slots: Object as SlotsType<{\n    default?: any;\n  }>,\n  setup(props, { slots, attrs }) {\n    const selected = shallowRef(false);\n\n    const indicator$ = ref();\n    const indicatorStyles = computed(() => {\n      return {};\n    });\n    const attrsProps = computed(() => {\n      return {\n        role: 'tab',\n        'aria-selected': `${String(selected.value)}`,\n        tabindex: selected.value ? 0 : -1,\n      };\n    });\n\n    function onChoice({ value }: { value: boolean }) {\n      selected.value = value;\n    }\n\n    useRender(() => {\n      const yButtonProps = chooseProps(props, YButton.props);\n      return (\n        <YButton\n          class={['y-tab']}\n          active={false}\n          {...attrsProps.value}\n          {...attrs}\n          {...yButtonProps}\n          injectSymbol={Y_TABS_KEY}\n          onChoice:selected={onChoice}\n        >\n          {{\n            default: () => slots.default?.() ?? props.text,\n            append: () =>\n              !props.hideIndicator && (\n                <div\n                  ref={indicator$}\n                  class={['y-tab__indicator']}\n                  style={indicatorStyles.value}\n                ></div>\n              ),\n          }}\n        </YButton>\n      );\n    });\n\n    return {};\n  },\n});\n\nexport type YTab = InstanceType<typeof YTab>;\n"],"mappings":";AAAA,SAAwCA,QAAQ,EAAEC,GAAG,EAAEC,UAAU,QAAQ,KAAK;AAAC,SAEtEC,SAAS;AAAA,SACTC,WAAW,EAAEC,eAAe,EAAEC,YAAY;AAAA,SAE1CC,OAAO,EAAEC,iBAAiB;AAAA,SAC1BC,UAAU;AAEnB;AAEA,OAAO,MAAMC,qBAAqB,GAAGJ,YAAY,CAC/C;EACEK,IAAI,EAAEC,MAA0B;EAChCC,aAAa,EAAEC,OAA4B;EAC3CC,cAAc,EAAEH,MAA0B;EAC1C,GAAGJ,iBAAiB,CAAC;IACnBQ,aAAa,EAAE,iBAAiB;IAChCC,MAAM,EAAE;EACV,CAAC;AACH,CAAC,EACD,MACF,CAAC;AAED,OAAO,MAAMC,IAAI,GAAGb,eAAe,CAAC;EAClCc,IAAI,EAAE,MAAM;EACZC,KAAK,EAAEV,qBAAqB,CAAC,CAAC;EAC9BW,KAAK,EAAEC,MAEL;EACFC,KAAKA,CAACH,KAAK,EAAAI,IAAA,EAAoB;IAAA,IAAlB;MAAEH,KAAK;MAAEI;IAAM,CAAC,GAAAD,IAAA;IAC3B,MAAME,QAAQ,GAAGxB,UAAU,CAAC,KAAK,CAAC;IAElC,MAAMyB,UAAU,GAAG1B,GAAG,CAAC,CAAC;IACxB,MAAM2B,eAAe,GAAG5B,QAAQ,CAAC,MAAM;MACrC,OAAO,CAAC,CAAC;IACX,CAAC,CAAC;IACF,MAAM6B,UAAU,GAAG7B,QAAQ,CAAC,MAAM;MAChC,OAAO;QACL8B,IAAI,EAAE,KAAK;QACX,eAAe,EAAG,GAAElB,MAAM,CAACc,QAAQ,CAACK,KAAK,CAAE,EAAC;QAC5CC,QAAQ,EAAEN,QAAQ,CAACK,KAAK,GAAG,CAAC,GAAG,CAAC;MAClC,CAAC;IACH,CAAC,CAAC;IAEF,SAASE,QAAQA,CAAAC,KAAA,EAAgC;MAAA,IAA/B;QAAEH;MAA0B,CAAC,GAAAG,KAAA;MAC7CR,QAAQ,CAACK,KAAK,GAAGA,KAAK;IACxB;IAEA5B,SAAS,CAAC,MAAM;MACd,MAAMgC,YAAY,GAAG/B,WAAW,CAACgB,KAAK,EAAEb,OAAO,CAACa,KAAK,CAAC;MACtD,OAAAgB,YAAA,CAAA7B,OAAA,EAAA8B,WAAA;QAAA,SAEW,CAAC,OAAO,CAAC;QAAA,UACR;MAAK,GACTR,UAAU,CAACE,KAAK,EAChBN,KAAK,EACLU,YAAY;QAAA,gBACF1B,UAAU;QAAA,qBACLwB;MAAQ;QAGzBK,OAAO,EAAEA,CAAA,KAAMjB,KAAK,CAACiB,OAAO,GAAG,CAAC,IAAIlB,KAAK,CAACT,IAAI;QAC9C4B,MAAM,EAAEA,CAAA,KACN,CAACnB,KAAK,CAACP,aAAa,IAAAuB,YAAA;UAAA,OAEXT,UAAU;UAAA,SACR,CAAC,kBAAkB,CAAC;UAAA,SACpBC,eAAe,CAACG;QAAK;MAE/B;IAIX,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
+{"version":3,"file":"YTab.mjs","names":["computed","ref","shallowRef","useRender","chooseProps","defineComponent","propsFactory","YButton","pressYButtonProps","Y_TABS_KEY","pressYTabPropsOptions","text","String","hideIndicator","Boolean","indicatorColor","selectedClass","noWave","YTab","name","props","slots","Object","setup","_ref","attrs","selected","indicator$","indicatorStyles","attrsProps","role","value","tabindex","onChoice","_ref2","yButtonProps","_createVNode","_mergeProps","default","append"],"sources":["../../../src/components/tab/YTab.tsx"],"sourcesContent":["import { type PropType, type SlotsType, computed, ref, shallowRef } from 'vue';\r\n\r\nimport { useRender } from '@/composables/component';\r\nimport { chooseProps, defineComponent, propsFactory } from '@/util/component';\r\n\r\nimport { YButton, pressYButtonProps } from '../button';\r\nimport { Y_TABS_KEY } from './shared';\r\n\r\nimport './YTab.scss';\r\n\r\nexport const pressYTabPropsOptions = propsFactory(\r\n  {\r\n    text: String as PropType<string>,\r\n    hideIndicator: Boolean as PropType<boolean>,\r\n    indicatorColor: String as PropType<string>,\r\n    ...pressYButtonProps({\r\n      selectedClass: 'y-tab--selected',\r\n      noWave: true,\r\n    }),\r\n  },\r\n  'YTab',\r\n);\r\n\r\nexport const YTab = defineComponent({\r\n  name: 'YTab',\r\n  props: pressYTabPropsOptions(),\r\n  slots: Object as SlotsType<{\r\n    default?: any;\r\n  }>,\r\n  setup(props, { slots, attrs }) {\r\n    const selected = shallowRef(false);\r\n\r\n    const indicator$ = ref();\r\n    const indicatorStyles = computed(() => {\r\n      return {};\r\n    });\r\n    const attrsProps = computed(() => {\r\n      return {\r\n        role: 'tab',\r\n        'aria-selected': `${String(selected.value)}`,\r\n        tabindex: selected.value ? 0 : -1,\r\n      };\r\n    });\r\n\r\n    function onChoice({ value }: { value: boolean }) {\r\n      selected.value = value;\r\n    }\r\n\r\n    useRender(() => {\r\n      const yButtonProps = chooseProps(props, YButton.props);\r\n      return (\r\n        <YButton\r\n          class={['y-tab']}\r\n          active={false}\r\n          {...attrsProps.value}\r\n          {...attrs}\r\n          {...yButtonProps}\r\n          injectSymbol={Y_TABS_KEY}\r\n          onChoice:selected={onChoice}\r\n        >\r\n          {{\r\n            default: () => slots.default?.() ?? props.text,\r\n            append: () =>\r\n              !props.hideIndicator && (\r\n                <div\r\n                  ref={indicator$}\r\n                  class={['y-tab__indicator']}\r\n                  style={indicatorStyles.value}\r\n                ></div>\r\n              ),\r\n          }}\r\n        </YButton>\r\n      );\r\n    });\r\n\r\n    return {};\r\n  },\r\n});\r\n\r\nexport type YTab = InstanceType<typeof YTab>;\r\n"],"mappings":";AAAA,SAAwCA,QAAQ,EAAEC,GAAG,EAAEC,UAAU,QAAQ,KAAK;AAAC,SAEtEC,SAAS;AAAA,SACTC,WAAW,EAAEC,eAAe,EAAEC,YAAY;AAAA,SAE1CC,OAAO,EAAEC,iBAAiB;AAAA,SAC1BC,UAAU;AAEnB;AAEA,OAAO,MAAMC,qBAAqB,GAAGJ,YAAY,CAC/C;EACEK,IAAI,EAAEC,MAA0B;EAChCC,aAAa,EAAEC,OAA4B;EAC3CC,cAAc,EAAEH,MAA0B;EAC1C,GAAGJ,iBAAiB,CAAC;IACnBQ,aAAa,EAAE,iBAAiB;IAChCC,MAAM,EAAE;EACV,CAAC;AACH,CAAC,EACD,MACF,CAAC;AAED,OAAO,MAAMC,IAAI,GAAGb,eAAe,CAAC;EAClCc,IAAI,EAAE,MAAM;EACZC,KAAK,EAAEV,qBAAqB,CAAC,CAAC;EAC9BW,KAAK,EAAEC,MAEL;EACFC,KAAKA,CAACH,KAAK,EAAAI,IAAA,EAAoB;IAAA,IAAlB;MAAEH,KAAK;MAAEI;IAAM,CAAC,GAAAD,IAAA;IAC3B,MAAME,QAAQ,GAAGxB,UAAU,CAAC,KAAK,CAAC;IAElC,MAAMyB,UAAU,GAAG1B,GAAG,CAAC,CAAC;IACxB,MAAM2B,eAAe,GAAG5B,QAAQ,CAAC,MAAM;MACrC,OAAO,CAAC,CAAC;IACX,CAAC,CAAC;IACF,MAAM6B,UAAU,GAAG7B,QAAQ,CAAC,MAAM;MAChC,OAAO;QACL8B,IAAI,EAAE,KAAK;QACX,eAAe,EAAG,GAAElB,MAAM,CAACc,QAAQ,CAACK,KAAK,CAAE,EAAC;QAC5CC,QAAQ,EAAEN,QAAQ,CAACK,KAAK,GAAG,CAAC,GAAG,CAAC;MAClC,CAAC;IACH,CAAC,CAAC;IAEF,SAASE,QAAQA,CAAAC,KAAA,EAAgC;MAAA,IAA/B;QAAEH;MAA0B,CAAC,GAAAG,KAAA;MAC7CR,QAAQ,CAACK,KAAK,GAAGA,KAAK;IACxB;IAEA5B,SAAS,CAAC,MAAM;MACd,MAAMgC,YAAY,GAAG/B,WAAW,CAACgB,KAAK,EAAEb,OAAO,CAACa,KAAK,CAAC;MACtD,OAAAgB,YAAA,CAAA7B,OAAA,EAAA8B,WAAA;QAAA,SAEW,CAAC,OAAO,CAAC;QAAA,UACR;MAAK,GACTR,UAAU,CAACE,KAAK,EAChBN,KAAK,EACLU,YAAY;QAAA,gBACF1B,UAAU;QAAA,qBACLwB;MAAQ;QAGzBK,OAAO,EAAEA,CAAA,KAAMjB,KAAK,CAACiB,OAAO,GAAG,CAAC,IAAIlB,KAAK,CAACT,IAAI;QAC9C4B,MAAM,EAAEA,CAAA,KACN,CAACnB,KAAK,CAACP,aAAa,IAAAuB,YAAA;UAAA,OAEXT,UAAU;UAAA,SACR,CAAC,kBAAkB,CAAC;UAAA,SACpBC,eAAe,CAACG;QAAK;MAE/B;IAIX,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}

package/lib/components/tab/YTab.scss

@@ -1,73 +1,73 @@
-@use '../../styles/variables';
-
-.y-tab {
-  --y-tab-color: var(--y-theme-on-surface);
-  --y-tab-active-color: var(--y-theme-primary);
-
-  --y-tab-indicator-width: 2.7px;
-  --y-tab-indicator-color: inherit;
-  --y-tab-active-indicator-color: var(--y-theme-primary);
-  --y-tab-hover-indicator-color: var(--y-theme-outline-variant);
-  --y-tab-indicator-side-offset: 4px;
-
-  border-radius: 0;
-  color: var(--y-tab-color);
-
-  &.y-button {
-    font-size: 1rem;
-    padding: 4px 8px 12px;
-    box-shadow: none;
-
-    &:before {
-      left: var(--y-tab-indicator-side-offset);
-      right: var(--y-tab-indicator-side-offset);
-      background: radial-gradient(currentColor, transparent 80%),
-        linear-gradient(0deg, currentColor, transparent 70%);
-    }
-  }
-
-  &__indicator {
-    height: var(--y-tab-indicator-width);
-    position: absolute;
-    left: var(--y-tab-indicator-side-offset);
-    right: var(--y-tab-indicator-side-offset);
-    bottom: 0;
-    background-color: currentColor;
-    border-top-left-radius: 4444px;
-    border-top-right-radius: 4444px;
-    transform: scaleY(0);
-    transform-origin: bottom center;
-    transition-timing-function: variables.$basic-transition-timing-function;
-    transition-duration: 200ms;
-    transition-property: all;
-    will-change: transform;
-  }
-
-  .y-button {
-    &__content {
-      padding: 0;
-    }
-  }
-
-  &--active,
-  .y-button--active {
-    font-weight: 700;
-    color: var(--y-tab-active-color);
-
-    &:before {
-      opacity: 0.04;
-    }
-  }
-
-  &:hover:not(&--active) &__indicator,
-  &:hover:not(.y-button--active) &__indicator {
-    transform: scaleY(1);
-    color: var(--y-tab-hover-indicator-color);
-  }
-
-  &--active &__indicator,
-  .y-button--active &__indicator {
-    color: var(--y-tab-active-indicator-color);
-    transform: scaleY(1);
-  }
-}
+@use '../../styles/variables';
+
+.y-tab {
+  --y-tab-color: var(--y-theme-on-surface);
+  --y-tab-active-color: var(--y-theme-primary);
+
+  --y-tab-indicator-width: 2.7px;
+  --y-tab-indicator-color: inherit;
+  --y-tab-active-indicator-color: var(--y-theme-primary);
+  --y-tab-hover-indicator-color: var(--y-theme-outline-variant);
+  --y-tab-indicator-side-offset: 4px;
+
+  border-radius: 0;
+  color: var(--y-tab-color);
+
+  &.y-button {
+    font-size: 1rem;
+    padding: 4px 8px 12px;
+    box-shadow: none;
+
+    &:before {
+      left: var(--y-tab-indicator-side-offset);
+      right: var(--y-tab-indicator-side-offset);
+      background: radial-gradient(currentColor, transparent 80%),
+        linear-gradient(0deg, currentColor, transparent 70%);
+    }
+  }
+
+  &__indicator {
+    height: var(--y-tab-indicator-width);
+    position: absolute;
+    left: var(--y-tab-indicator-side-offset);
+    right: var(--y-tab-indicator-side-offset);
+    bottom: 0;
+    background-color: currentColor;
+    border-top-left-radius: 4444px;
+    border-top-right-radius: 4444px;
+    transform: scaleY(0);
+    transform-origin: bottom center;
+    transition-timing-function: variables.$basic-transition-timing-function;
+    transition-duration: 200ms;
+    transition-property: all;
+    will-change: transform;
+  }
+
+  .y-button {
+    &__content {
+      padding: 0;
+    }
+  }
+
+  &--active,
+  .y-button--active {
+    font-weight: 700;
+    color: var(--y-tab-active-color);
+
+    &:before {
+      opacity: 0.04;
+    }
+  }
+
+  &:hover:not(&--active) &__indicator,
+  &:hover:not(.y-button--active) &__indicator {
+    transform: scaleY(1);
+    color: var(--y-tab-hover-indicator-color);
+  }
+
+  &--active &__indicator,
+  .y-button--active &__indicator {
+    color: var(--y-tab-active-indicator-color);
+    transform: scaleY(1);
+  }
+}

package/lib/components/tab/YTabs.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YTabs.mjs","names":["computed","pressChoicePropsOptions","useChoice","useRender","useResizeObserver","defineComponent","propsFactory","YTab","Y_TABS_KEY","pressYTabsPropOptions","items","type","Array","selectedClass","mandatory","YTabs","name","props","tag","String","default","emits","value","setup","_ref","slots","resizeObservedRef","container$","contentRect","containerRect","content$","choiceState","slotProps","next","prev","select","isSelected","tabItems","map","item","text","_createVNode","tabItem","_mergeProps","selected"],"sources":["../../../src/components/tab/YTabs.tsx"],"sourcesContent":["import { type PropType, computed } from 'vue';\n\nimport { pressChoicePropsOptions, useChoice } from '@/composables/choice';\nimport { useRender } from '@/composables/component';\nimport { useResizeObserver } from '@/composables/resize-observer';\nimport { defineComponent, propsFactory } from '@/util/component';\n\nimport { YTab } from './YTab';\nimport { Y_TABS_KEY } from './shared';\nimport { YTabPropItem } from './types';\n\nimport './YTabs.scss';\n\nexport const pressYTabsPropOptions = propsFactory(\n  {\n    items: {\n      type: Array as PropType<YTabPropItem[]>,\n    },\n    ...pressChoicePropsOptions({\n      selectedClass: 'y-tab--active',\n      mandatory: 'force' as const,\n    }),\n  },\n  'YTabs',\n);\n\nexport const YTabs = defineComponent({\n  name: 'YTabs',\n  props: {\n    tag: {\n      type: String as PropType<'div' | 'nav' | 'ol' | 'ul'>,\n      default: 'div',\n    },\n    ...pressYTabsPropOptions(),\n  },\n  emits: {\n    'update:modelValue': (value: any) => true,\n  },\n  setup(props, { slots }) {\n    const { resizeObservedRef: container$, contentRect: containerRect } =\n      useResizeObserver();\n    const { resizeObservedRef: content$, contentRect } = useResizeObserver();\n\n    const choiceState = useChoice(props, Y_TABS_KEY);\n\n    const slotProps = computed(() => {\n      return {\n        next: choiceState.next,\n        prev: choiceState.prev,\n        select: choiceState.select,\n        isSelected: choiceState.isSelected,\n      };\n    });\n\n    const tabItems = computed(() => {\n      return (\n        props.items?.map((item) => {\n          if (typeof item !== 'object') {\n            return {\n              text: item,\n              value: item,\n            };\n          }\n          return item;\n        }) ?? []\n      );\n    });\n\n    useRender(() => {\n      return (\n        <props.tag class={['y-tabs']} role=\"tablist\">\n          <div key=\"container\" ref={container$} class={['y-tabs__container']}>\n            <div key=\"content\" ref={content$} class={['y-tabs__content']}>\n              {slots.default\n                ? slots.default(slotProps.value)\n                : tabItems.value.map((tabItem) => (\n                    <YTab {...tabItem} key={tabItem.text}></YTab>\n                  ))}\n            </div>\n          </div>\n        </props.tag>\n      );\n    });\n\n    return {\n      selected: choiceState.selected,\n    };\n  },\n});\n\nexport type YTabs = InstanceType<typeof YTabs>;\n"],"mappings":";AAAA,SAAwBA,QAAQ,QAAQ,KAAK;AAAC,SAErCC,uBAAuB,EAAEC,SAAS;AAAA,SAClCC,SAAS;AAAA,SACTC,iBAAiB;AAAA,SACjBC,eAAe,EAAEC,YAAY;AAAA,SAE7BC,IAAI;AAAA,SACJC,UAAU;AAGnB;AAEA,OAAO,MAAMC,qBAAqB,GAAGH,YAAY,CAC/C;EACEI,KAAK,EAAE;IACLC,IAAI,EAAEC;EACR,CAAC;EACD,GAAGX,uBAAuB,CAAC;IACzBY,aAAa,EAAE,eAAe;IAC9BC,SAAS,EAAE;EACb,CAAC;AACH,CAAC,EACD,OACF,CAAC;AAED,OAAO,MAAMC,KAAK,GAAGV,eAAe,CAAC;EACnCW,IAAI,EAAE,OAAO;EACbC,KAAK,EAAE;IACLC,GAAG,EAAE;MACHP,IAAI,EAAEQ,MAA+C;MACrDC,OAAO,EAAE;IACX,CAAC;IACD,GAAGX,qBAAqB,CAAC;EAC3B,CAAC;EACDY,KAAK,EAAE;IACL,mBAAmB,EAAGC,KAAU,IAAK;EACvC,CAAC;EACDC,KAAKA,CAACN,KAAK,EAAAO,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpB,MAAM;MAAEE,iBAAiB,EAAEC,UAAU;MAAEC,WAAW,EAAEC;IAAc,CAAC,GACjEzB,iBAAiB,CAAC,CAAC;IACrB,MAAM;MAAEsB,iBAAiB,EAAEI,QAAQ;MAAEF;IAAY,CAAC,GAAGxB,iBAAiB,CAAC,CAAC;IAExE,MAAM2B,WAAW,GAAG7B,SAAS,CAACe,KAAK,EAAET,UAAU,CAAC;IAEhD,MAAMwB,SAAS,GAAGhC,QAAQ,CAAC,MAAM;MAC/B,OAAO;QACLiC,IAAI,EAAEF,WAAW,CAACE,IAAI;QACtBC,IAAI,EAAEH,WAAW,CAACG,IAAI;QACtBC,MAAM,EAAEJ,WAAW,CAACI,MAAM;QAC1BC,UAAU,EAAEL,WAAW,CAACK;MAC1B,CAAC;IACH,CAAC,CAAC;IAEF,MAAMC,QAAQ,GAAGrC,QAAQ,CAAC,MAAM;MAC9B,OACEiB,KAAK,CAACP,KAAK,EAAE4B,GAAG,CAAEC,IAAI,IAAK;QACzB,IAAI,OAAOA,IAAI,KAAK,QAAQ,EAAE;UAC5B,OAAO;YACLC,IAAI,EAAED,IAAI;YACVjB,KAAK,EAAEiB;UACT,CAAC;QACH;QACA,OAAOA,IAAI;MACb,CAAC,CAAC,IAAI,EAAE;IAEZ,CAAC,CAAC;IAEFpC,SAAS,CAAC,MAAM;MACd,OAAAsC,YAAA,CAAAxB,KAAA,CAAAC,GAAA;QAAA,SACoB,CAAC,QAAQ,CAAC;QAAA;MAAA;QAAAE,OAAA,EAAAA,CAAA,MAAAqB,YAAA;UAAA;UAAA,OACAd,UAAU;UAAA,SAAS,CAAC,mBAAmB;QAAC,IAAAc,YAAA;UAAA;UAAA,OACxCX,QAAQ;UAAA,SAAS,CAAC,iBAAiB;QAAC,IACzDL,KAAK,CAACL,OAAO,GACVK,KAAK,CAACL,OAAO,CAACY,SAAS,CAACV,KAAK,CAAC,GAC9Be,QAAQ,CAACf,KAAK,CAACgB,GAAG,CAAEI,OAAO,IAAAD,YAAA,CAAAlC,IAAA,EAAAoC,WAAA,CACfD,OAAO;UAAA,OAAOA,OAAO,CAACF;QAAI,SACrC,CAAC;MAAA;IAKhB,CAAC,CAAC;IAEF,OAAO;MACLI,QAAQ,EAAEb,WAAW,CAACa;IACxB,CAAC;EACH;AACF,CAAC,CAAC"}
+{"version":3,"file":"YTabs.mjs","names":["computed","pressChoicePropsOptions","useChoice","useRender","useResizeObserver","defineComponent","propsFactory","YTab","Y_TABS_KEY","pressYTabsPropOptions","items","type","Array","selectedClass","mandatory","YTabs","name","props","tag","String","default","emits","value","setup","_ref","slots","resizeObservedRef","container$","contentRect","containerRect","content$","choiceState","slotProps","next","prev","select","isSelected","tabItems","map","item","text","_createVNode","tabItem","_mergeProps","selected"],"sources":["../../../src/components/tab/YTabs.tsx"],"sourcesContent":["import { type PropType, computed } from 'vue';\r\n\r\nimport { pressChoicePropsOptions, useChoice } from '@/composables/choice';\r\nimport { useRender } from '@/composables/component';\r\nimport { useResizeObserver } from '@/composables/resize-observer';\r\nimport { defineComponent, propsFactory } from '@/util/component';\r\n\r\nimport { YTab } from './YTab';\r\nimport { Y_TABS_KEY } from './shared';\r\nimport { YTabPropItem } from './types';\r\n\r\nimport './YTabs.scss';\r\n\r\nexport const pressYTabsPropOptions = propsFactory(\r\n  {\r\n    items: {\r\n      type: Array as PropType<YTabPropItem[]>,\r\n    },\r\n    ...pressChoicePropsOptions({\r\n      selectedClass: 'y-tab--active',\r\n      mandatory: 'force' as const,\r\n    }),\r\n  },\r\n  'YTabs',\r\n);\r\n\r\nexport const YTabs = defineComponent({\r\n  name: 'YTabs',\r\n  props: {\r\n    tag: {\r\n      type: String as PropType<'div' | 'nav' | 'ol' | 'ul'>,\r\n      default: 'div',\r\n    },\r\n    ...pressYTabsPropOptions(),\r\n  },\r\n  emits: {\r\n    'update:modelValue': (value: any) => true,\r\n  },\r\n  setup(props, { slots }) {\r\n    const { resizeObservedRef: container$, contentRect: containerRect } =\r\n      useResizeObserver();\r\n    const { resizeObservedRef: content$, contentRect } = useResizeObserver();\r\n\r\n    const choiceState = useChoice(props, Y_TABS_KEY);\r\n\r\n    const slotProps = computed(() => {\r\n      return {\r\n        next: choiceState.next,\r\n        prev: choiceState.prev,\r\n        select: choiceState.select,\r\n        isSelected: choiceState.isSelected,\r\n      };\r\n    });\r\n\r\n    const tabItems = computed(() => {\r\n      return (\r\n        props.items?.map((item) => {\r\n          if (typeof item !== 'object') {\r\n            return {\r\n              text: item,\r\n              value: item,\r\n            };\r\n          }\r\n          return item;\r\n        }) ?? []\r\n      );\r\n    });\r\n\r\n    useRender(() => {\r\n      return (\r\n        <props.tag class={['y-tabs']} role=\"tablist\">\r\n          <div key=\"container\" ref={container$} class={['y-tabs__container']}>\r\n            <div key=\"content\" ref={content$} class={['y-tabs__content']}>\r\n              {slots.default\r\n                ? slots.default(slotProps.value)\r\n                : tabItems.value.map((tabItem) => (\r\n                    <YTab {...tabItem} key={tabItem.text}></YTab>\r\n                  ))}\r\n            </div>\r\n          </div>\r\n        </props.tag>\r\n      );\r\n    });\r\n\r\n    return {\r\n      selected: choiceState.selected,\r\n    };\r\n  },\r\n});\r\n\r\nexport type YTabs = InstanceType<typeof YTabs>;\r\n"],"mappings":";AAAA,SAAwBA,QAAQ,QAAQ,KAAK;AAAC,SAErCC,uBAAuB,EAAEC,SAAS;AAAA,SAClCC,SAAS;AAAA,SACTC,iBAAiB;AAAA,SACjBC,eAAe,EAAEC,YAAY;AAAA,SAE7BC,IAAI;AAAA,SACJC,UAAU;AAGnB;AAEA,OAAO,MAAMC,qBAAqB,GAAGH,YAAY,CAC/C;EACEI,KAAK,EAAE;IACLC,IAAI,EAAEC;EACR,CAAC;EACD,GAAGX,uBAAuB,CAAC;IACzBY,aAAa,EAAE,eAAe;IAC9BC,SAAS,EAAE;EACb,CAAC;AACH,CAAC,EACD,OACF,CAAC;AAED,OAAO,MAAMC,KAAK,GAAGV,eAAe,CAAC;EACnCW,IAAI,EAAE,OAAO;EACbC,KAAK,EAAE;IACLC,GAAG,EAAE;MACHP,IAAI,EAAEQ,MAA+C;MACrDC,OAAO,EAAE;IACX,CAAC;IACD,GAAGX,qBAAqB,CAAC;EAC3B,CAAC;EACDY,KAAK,EAAE;IACL,mBAAmB,EAAGC,KAAU,IAAK;EACvC,CAAC;EACDC,KAAKA,CAACN,KAAK,EAAAO,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACpB,MAAM;MAAEE,iBAAiB,EAAEC,UAAU;MAAEC,WAAW,EAAEC;IAAc,CAAC,GACjEzB,iBAAiB,CAAC,CAAC;IACrB,MAAM;MAAEsB,iBAAiB,EAAEI,QAAQ;MAAEF;IAAY,CAAC,GAAGxB,iBAAiB,CAAC,CAAC;IAExE,MAAM2B,WAAW,GAAG7B,SAAS,CAACe,KAAK,EAAET,UAAU,CAAC;IAEhD,MAAMwB,SAAS,GAAGhC,QAAQ,CAAC,MAAM;MAC/B,OAAO;QACLiC,IAAI,EAAEF,WAAW,CAACE,IAAI;QACtBC,IAAI,EAAEH,WAAW,CAACG,IAAI;QACtBC,MAAM,EAAEJ,WAAW,CAACI,MAAM;QAC1BC,UAAU,EAAEL,WAAW,CAACK;MAC1B,CAAC;IACH,CAAC,CAAC;IAEF,MAAMC,QAAQ,GAAGrC,QAAQ,CAAC,MAAM;MAC9B,OACEiB,KAAK,CAACP,KAAK,EAAE4B,GAAG,CAAEC,IAAI,IAAK;QACzB,IAAI,OAAOA,IAAI,KAAK,QAAQ,EAAE;UAC5B,OAAO;YACLC,IAAI,EAAED,IAAI;YACVjB,KAAK,EAAEiB;UACT,CAAC;QACH;QACA,OAAOA,IAAI;MACb,CAAC,CAAC,IAAI,EAAE;IAEZ,CAAC,CAAC;IAEFpC,SAAS,CAAC,MAAM;MACd,OAAAsC,YAAA,CAAAxB,KAAA,CAAAC,GAAA;QAAA,SACoB,CAAC,QAAQ,CAAC;QAAA;MAAA;QAAAE,OAAA,EAAAA,CAAA,MAAAqB,YAAA;UAAA;UAAA,OACAd,UAAU;UAAA,SAAS,CAAC,mBAAmB;QAAC,IAAAc,YAAA;UAAA;UAAA,OACxCX,QAAQ;UAAA,SAAS,CAAC,iBAAiB;QAAC,IACzDL,KAAK,CAACL,OAAO,GACVK,KAAK,CAACL,OAAO,CAACY,SAAS,CAACV,KAAK,CAAC,GAC9Be,QAAQ,CAACf,KAAK,CAACgB,GAAG,CAAEI,OAAO,IAAAD,YAAA,CAAAlC,IAAA,EAAAoC,WAAA,CACfD,OAAO;UAAA,OAAOA,OAAO,CAACF;QAAI,SACrC,CAAC;MAAA;IAKhB,CAAC,CAAC;IAEF,OAAO;MACLI,QAAQ,EAAEb,WAAW,CAACa;IACxB,CAAC;EACH;AACF,CAAC,CAAC"}

package/lib/components/tab/YTabs.scss

@@ -1,8 +1,8 @@
-.y-tabs {
-  --y-tabs-gap: 16px;
-
-  &__content {
-    display: flex;
-    gap: var(--y-tabs-gap);
-  }
-}
+.y-tabs {
+  --y-tabs-gap: 16px;
+
+  &__content {
+    display: flex;
+    gap: var(--y-tabs-gap);
+  }
+}

package/lib/components/tab/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Y_TABS_KEY"],"sources":["../../../src/components/tab/index.ts"],"sourcesContent":["export * from './YTabs';\nexport * from './YTab';\nexport { Y_TABS_KEY } from './shared';\n"],"mappings":";;SAESA,UAAU"}
+{"version":3,"file":"index.mjs","names":["Y_TABS_KEY"],"sources":["../../../src/components/tab/index.ts"],"sourcesContent":["export * from './YTabs';\r\nexport * from './YTab';\r\nexport { Y_TABS_KEY } from './shared';\r\n"],"mappings":";;SAESA,UAAU"}

package/lib/components/tab/types.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"types.mjs","names":[],"sources":["../../../src/components/tab/types.ts"],"sourcesContent":["export interface YTabPropItem {\n  text: string;\n  value?: string;\n  [Key: string]: any;\n}\n"],"mappings":""}
+{"version":3,"file":"types.mjs","names":[],"sources":["../../../src/components/tab/types.ts"],"sourcesContent":["export interface YTabPropItem {\r\n  text: string;\r\n  value?: string;\r\n  [Key: string]: any;\r\n}\r\n"],"mappings":""}