@digitalwalletcorp/vue-core 1.1.0 → 1.2.1

package/lib/{page-section.vue_vue_type_style_index_0_lang-bvQeBjUP.cjs → page-section.vue_vue_type_style_index_0_lang-DEAkTLxd.cjs}

@@ -1 +1 @@
-"use strict";const e=require("vue"),n=require("@digitalwalletcorp/vue-svg-icons"),r=require("./label-icon.vue_vue_type_style_index_0_lang-C2URq6GP.cjs"),a={class:"dwui-page-section"},i={class:"dwui-page-section-content"},p=e.defineComponent({__name:"page-section",props:{title:{},icon:{default:"diamond"},iconVariant:{},iconColor:{},titleClass:{type:[Boolean,null,String,Object,Array]},titleStyle:{type:[Boolean,null,String,Object,Array]}},setup(l){const o=l,s={diamond:{component:n.SvgDiamond,shape:!0,color:"#1a44b6"},circle:{component:n.SvgCircle,shape:!0,color:"#e78b2f"},square:{component:n.SvgSquare,shape:!0,color:"#d13a2b"},pushpin:{component:n.SvgPushpin,shape:!1},"round-pushpin":{component:n.SvgRoundPushpin,shape:!1}},c=e.computed(()=>{const t=s[o.icon];return{component:t.component,props:t.shape?{variant:o.iconVariant,color:o.iconColor??t.color}:{}}});return(t,u)=>(e.openBlock(),e.createElementBlock("section",a,[o.title!=null?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["dwui-page-section-title",o.titleClass]),style:e.normalizeStyle(o.titleStyle)},[e.createVNode(r._sfc_main,null,{icon:e.withCtx(()=>[e.renderSlot(t.$slots,"icon",{},()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(c.value.component),e.normalizeProps(e.guardReactiveProps(c.value.props)),null,16))])]),default:e.withCtx(()=>[e.createTextVNode(" "+e.toDisplayString(o.title),1)]),_:3})],6)):e.createCommentVNode("",!0),e.createElementVNode("div",i,[e.renderSlot(t.$slots,"default")])]))}});exports._sfc_main=p;
+"use strict";const e=require("vue"),n=require("@digitalwalletcorp/vue-svg-icons"),r=require("./label-icon.vue_vue_type_style_index_0_lang-D9Cimu20.cjs"),a={class:"dwui-page-section"},i={class:"dwui-page-section-content"},p=e.defineComponent({__name:"page-section",props:{title:{},icon:{default:"diamond"},iconVariant:{},iconColor:{},titleClass:{type:[Boolean,null,String,Object,Array]},titleStyle:{type:[Boolean,null,String,Object,Array]}},setup(l){const o=l,s={diamond:{component:n.SvgDiamond,shape:!0,color:"#1a44b6"},circle:{component:n.SvgCircle,shape:!0,color:"#e78b2f"},square:{component:n.SvgSquare,shape:!0,color:"#d13a2b"},pushpin:{component:n.SvgPushpin,shape:!1},"round-pushpin":{component:n.SvgRoundPushpin,shape:!1}},c=e.computed(()=>{const t=s[o.icon];return{component:t.component,props:t.shape?{variant:o.iconVariant,color:o.iconColor??t.color}:{}}});return(t,u)=>(e.openBlock(),e.createElementBlock("section",a,[o.title!=null?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["dwui-page-section-title",o.titleClass]),style:e.normalizeStyle(o.titleStyle)},[e.createVNode(r._sfc_main,null,{icon:e.withCtx(()=>[e.renderSlot(t.$slots,"icon",{},()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(c.value.component),e.normalizeProps(e.guardReactiveProps(c.value.props)),null,16))])]),default:e.withCtx(()=>[e.createTextVNode(" "+e.toDisplayString(o.title),1)]),_:3})],6)):e.createCommentVNode("",!0),e.createElementVNode("div",i,[e.renderSlot(t.$slots,"default")])]))}});exports._sfc_main=p;

package/lib/{page-section.vue_vue_type_style_index_0_lang-4MLb_sDZ.js → page-section.vue_vue_type_style_index_0_lang-DpVQe_rV.js}

@@ -1,6 +1,6 @@
 import { defineComponent as i, computed as p, openBlock as t, createElementBlock as r, normalizeStyle as m, normalizeClass as u, createVNode as d, withCtx as a, createTextVNode as S, toDisplayString as h, renderSlot as l, createBlock as _, resolveDynamicComponent as g, normalizeProps as f, guardReactiveProps as v, createCommentVNode as y, createElementVNode as C } from "vue";
 import { SvgRoundPushpin as V, SvgPushpin as b, SvgSquare as B, SvgCircle as N, SvgDiamond as P } from "@digitalwalletcorp/vue-svg-icons";
-import { _ as k } from "./label-icon.vue_vue_type_style_index_0_lang-bQFkQ_gC.js";
+import { _ as k } from "./label-icon.vue_vue_type_style_index_0_lang-me52HE2V.js";
 const w = { class: "dwui-page-section" }, E = { class: "dwui-page-section-content" }, $ = /* @__PURE__ */ i({
   __name: "page-section",
   props: {

package/lib/page-title.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./page-title.vue_vue_type_style_index_0_lang-DcmGICoo.cjs");exports.default=e._sfc_main;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./page-title.vue_vue_type_style_index_0_lang-BqIsIks5.cjs");exports.default=e._sfc_main;

package/lib/page-title.d.cts

@@ -0,0 +1,20 @@
+interface Props {
+    /** タイトルの文字 */
+    title: string;
+}
+interface Slots {
+    /** タイトルの文字の前に表示するアイコン */
+    icon?(): unknown;
+    /** タイトルバーの右側に表示する内容 */
+    default?(): unknown;
+}
+type __VLS_Slots = Slots;
+declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/page-title.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./page-title.vue_vue_type_style_index_0_lang-CzfdMzXf.js";
+import { _ as f } from "./page-title.vue_vue_type_style_index_0_lang-ChZot85K.js";
 export {
   f as default
 };

package/lib/{page-title.vue_vue_type_style_index_0_lang-DcmGICoo.cjs → page-title.vue_vue_type_style_index_0_lang-BqIsIks5.cjs}

@@ -1 +1 @@
-"use strict";const e=require("vue"),l=require("./label-icon.vue_vue_type_style_index_0_lang-C2URq6GP.cjs"),c={class:"dwui-page-title"},i={key:0,class:"dwui-page-title-actions"},a=e.defineComponent({__name:"page-title",props:{title:{}},setup(n){const s=n,t=e.useSlots();return(o,r)=>(e.openBlock(),e.createElementBlock("section",c,[e.createVNode(l._sfc_main,{class:"dwui-page-title-label"},e.createSlots({default:e.withCtx(()=>[e.createTextVNode(" "+e.toDisplayString(s.title),1)]),_:2},[t.icon!=null?{name:"icon",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"icon")]),key:"0"}:void 0]),1024),t.default!=null?(e.openBlock(),e.createElementBlock("span",i,[e.renderSlot(o.$slots,"default")])):e.createCommentVNode("",!0)]))}});exports._sfc_main=a;
+"use strict";const e=require("vue"),l=require("./label-icon.vue_vue_type_style_index_0_lang-D9Cimu20.cjs"),c={class:"dwui-page-title"},i={key:0,class:"dwui-page-title-actions"},a=e.defineComponent({__name:"page-title",props:{title:{}},setup(n){const s=n,t=e.useSlots();return(o,r)=>(e.openBlock(),e.createElementBlock("section",c,[e.createVNode(l._sfc_main,{class:"dwui-page-title-label"},e.createSlots({default:e.withCtx(()=>[e.createTextVNode(" "+e.toDisplayString(s.title),1)]),_:2},[t.icon!=null?{name:"icon",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"icon")]),key:"0"}:void 0]),1024),t.default!=null?(e.openBlock(),e.createElementBlock("span",i,[e.renderSlot(o.$slots,"default")])):e.createCommentVNode("",!0)]))}});exports._sfc_main=a;

package/lib/{page-title.vue_vue_type_style_index_0_lang-CzfdMzXf.js → page-title.vue_vue_type_style_index_0_lang-ChZot85K.js}

@@ -1,5 +1,5 @@
 import { defineComponent as c, useSlots as r, openBlock as o, createElementBlock as s, createVNode as p, createSlots as d, withCtx as l, createTextVNode as u, toDisplayString as _, renderSlot as n, createCommentVNode as m } from "vue";
-import { _ as f } from "./label-icon.vue_vue_type_style_index_0_lang-bQFkQ_gC.js";
+import { _ as f } from "./label-icon.vue_vue_type_style_index_0_lang-me52HE2V.js";
 const g = { class: "dwui-page-title" }, h = {
   key: 0,
   class: "dwui-page-title-actions"

package/lib/register.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./components-YAonMRcW.cjs");function r(e){for(const[o,n]of Object.entries(t.components))e.component(o,n)}exports.registerComponents=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./components-C63HJoCn.cjs");function r(e){for(const[o,n]of Object.entries(t.components))e.component(o,n)}exports.registerComponents=r;

package/lib/register.d.cts

@@ -0,0 +1,9 @@
+import { App } from 'vue';
+import * as components from './components.cjs';
+type VueCoreComponents = typeof components;
+declare module 'vue' {
+    interface GlobalComponents extends VueCoreComponents {
+    }
+}
+export declare function registerComponents(app: App): void;
+export {};

package/lib/register.js

@@ -1,4 +1,4 @@
-import { c as t } from "./components-xNQBXMzx.js";
+import { c as t } from "./components-q4Cf97bO.js";
 function m(o) {
   for (const [n, e] of Object.entries(t))
     o.component(n, e);

package/lib/style.css

@@ -1 +1 @@
-:where(.dwui-label-icon){display:inline-block}:where(.dwui-label-icon>.dwui-label){display:inline-block}:where(.dwui-label-icon>.dwui-label:not(:first-child)){margin-left:var(--dwui-label-icon-gap, .25em)}:where(.dwui-accordion-fieldset){position:relative}:where(.dwui-accordion-toggle){display:inline-flex;align-items:center;gap:4px;margin-left:4px;padding:0;border:none;background:none;color:inherit;cursor:pointer}:where(.dwui-accordion-toggle:disabled){opacity:.6;cursor:not-allowed}:where(.dwui-accordion-contents){position:relative;width:fit-content;padding:2px;overflow:hidden;opacity:1}:where(.dwui-accordion-contents.dwui-expanded){transition:all .3s linear}:where(.dwui-accordion-contents.dwui-shrunk){height:auto;max-height:70px;opacity:.75;transition:all .3s linear}:where(.dwui-accordion-section){position:relative}:where(.dwui-accordion-section-contents){position:relative;width:fit-content;overflow:hidden}:where(.dwui-accordion-section-contents.dwui-expanded){transition:all .3s linear}:where(.dwui-accordion-section-contents.dwui-shrunk){height:auto;max-height:70px;transition:all .3s linear}:where(.dwui-accordion-section-contents.dwui-shrunk:not(.dwui-no-gradient)):after{content:"";position:absolute;inset:0;background-image:linear-gradient(180deg,transparent 0%,transparent 60%,var(--dwui-accordion-section-fade, Canvas) 100%);pointer-events:none}:where(.dwui-accordion-section-control){position:relative;display:flex;justify-content:center;width:100%}:where(.dwui-accordion-section-toggle){display:inline-flex;align-items:center;cursor:pointer}:where(.dwui-accordion-section-toggle:disabled){opacity:.6;cursor:not-allowed}:where(.dwui-accordion-section-toggle[aria-expanded=true]){margin-top:8px}:where(.dwui-accordion-section-toggle[aria-expanded=false]){margin-top:-10px}:where(.dwui-hourglass-loading){animation:dwui-hourglass-loading-spin 1.2s linear infinite}@keyframes dwui-hourglass-loading-spin{to{transform:rotate(360deg)}}:where(.dwui-page-section){display:block;margin:4px 0 8px;padding-top:2px;font-size:var(--dwui-page-section-font-size, 12px);font-weight:500}:where(.dwui-page-section-title){display:flex;align-items:center;font-size:var(--dwui-page-section-title-font-size, 14px)}:where(.dwui-page-section-content){margin:8px 0 8px 16px}:where(.dwui-page-title){display:flex;align-items:center;justify-content:space-between;width:var(--dwui-page-title-width, auto);padding:4px;border-radius:4px;background:var(--dwui-page-title-bg, linear-gradient(#323232 0%, rgb(32, 32, 31) 25%, rgb(32, 32, 31) 75%, #323232 100%));color:var(--dwui-page-title-text, rgb(220, 220, 220));font-size:var(--dwui-page-title-font-size, 14px);font-weight:var(--dwui-page-title-font-weight, normal)}:where(.dwui-tab-content[aria-checked=false]){display:none}:where(.dwui-tab-content[aria-checked=true]){display:block;position:relative;padding:4px 8px;overflow:hidden;animation:dwui-tab-slide-in var(--dwui-tab-slide-duration, .35s) var(--dwui-tab-slide-easing, cubic-bezier(.22, 1, .36, 1))}:where(.dwui-tab-loading){position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;background:var(--dwui-loading-overlay, rgba(0, 0, 0, .25))}:where(.dwui-tab-loading-spinner){width:var(--dwui-loading-spinner-size, 40px);height:var(--dwui-loading-spinner-size, 40px);border:4px solid var(--dwui-loading-spinner-track, rgba(255, 255, 255, .4));border-top-color:var(--dwui-loading-spinner-color, #ffffff);border-radius:50%;animation:dwui-tab-loading-spin .8s linear infinite}@keyframes dwui-tab-loading-spin{to{transform:rotate(360deg)}}@keyframes dwui-tab-slide-in{0%{opacity:0;transform:translate(var(--dwui-tab-slide-distance, -128px))}to{opacity:1;transform:translate(0)}}:where(.dwui-tab-group){margin-bottom:8px}:where(.dwui-tab-headers){display:flex;flex-direction:row;flex-wrap:wrap;margin-top:5px;padding-bottom:4px}:where(.dwui-tab-radio){display:none}:where(.dwui-tab-item){display:block;min-width:100px;padding:0 4px;border:1px solid var(--dwui-tab-border, #565656);border-bottom:1px solid var(--dwui-tab-header-accent, #5ab4bd);background:var(--dwui-tab-header-bg, linear-gradient(#1313c7, navy));line-height:2em;text-align:center;white-space:nowrap;color:var(--dwui-tab-header-text, azure);text-overflow:ellipsis;cursor:pointer;transition:all .2s ease}:where(.dwui-tab-radio:checked+.dwui-tab-item){background:var(--dwui-tab-header-selected-bg, linear-gradient(#1313c7, rgb(149, 149, 234), #1313c7));color:var(--dwui-tab-header-selected-text, azure);cursor:default}:where(.dwui-tab-radio:disabled+.dwui-tab-item){background:var(--dwui-tab-header-disabled-bg, gray);cursor:not-allowed}:where(.dwui-tab-item.dwui-tab-warn){background:var(--dwui-tab-header-warn-bg, #efef13);color:var(--dwui-tab-header-warn-text, midnightblue)}:where(.dwui-tab-radio:checked+.dwui-tab-item.dwui-tab-warn){background:var(--dwui-tab-header-warn-selected-bg, linear-gradient(#fafa06, rgb(232, 238, 206), #fafa06))}:where(.dwui-tab-item.dwui-tab-error){background:var(--dwui-tab-header-error-bg, red);color:var(--dwui-tab-header-error-text, azure)}:where(.dwui-tab-radio:checked+.dwui-tab-item.dwui-tab-error){background:var(--dwui-tab-header-error-selected-bg, linear-gradient(#ff0000, rgb(240, 136, 136), #ff0000))}:where(.dwui-tab-radio:not(:checked)+.dwui-tab-item:hover){box-shadow:inset 0 0 0 999px var(--dwui-tab-header-hover-overlay, rgba(255, 255, 255, .35))}:where(.dwui-tab-items){height:100%;border:1px solid var(--dwui-tab-border, #565656);overflow:hidden}
+:where(.dwui-label-icon){display:inline-block}:where(.dwui-label-icon>.dwui-label){display:inline-block}:where(.dwui-label-icon>.dwui-label:not(:first-child)){margin-left:var(--dwui-gap-label-icon, .25em)}:where(.dwui-accordion-fieldset){position:relative}:where(.dwui-accordion-toggle){display:inline-flex;align-items:center;gap:4px;margin-left:4px;padding:0;border:none;background:none;color:inherit;cursor:pointer}:where(.dwui-accordion-toggle:disabled){opacity:.6;cursor:not-allowed}:where(.dwui-accordion-toggle:focus-visible){outline:var(--dwui-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);outline-offset:var(--dwui-offset-focus-ring, 2px)}:where(.dwui-accordion-contents){position:relative;width:fit-content;padding:2px;overflow:hidden;opacity:1}:where(.dwui-accordion-contents.dwui-expanded){transition:all .3s linear}:where(.dwui-accordion-contents.dwui-shrunk){height:auto;max-height:70px;opacity:.75;transition:all .3s linear}:where(.dwui-accordion-section){position:relative}:where(.dwui-accordion-section-contents){position:relative;width:fit-content;overflow:hidden}:where(.dwui-accordion-section-contents.dwui-expanded){transition:all .3s linear}:where(.dwui-accordion-section-contents.dwui-shrunk){height:auto;max-height:70px;transition:all .3s linear}:where(.dwui-accordion-section-contents.dwui-shrunk:not(.dwui-no-gradient)):after{content:"";position:absolute;inset:0;background-image:linear-gradient(180deg,transparent 0%,transparent 60%,var(--dwui-color-accordion-section-fade, Canvas) 100%);pointer-events:none}:where(.dwui-accordion-section-control){position:relative;display:flex;justify-content:center;width:100%}:where(.dwui-accordion-section-toggle){display:inline-flex;align-items:center;padding:0;border:none;background:none;color:inherit;cursor:pointer}:where(.dwui-accordion-section-toggle:disabled){opacity:.6;cursor:not-allowed}:where(.dwui-accordion-section-toggle:focus-visible){outline:var(--dwui-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);outline-offset:var(--dwui-offset-focus-ring, 2px)}:where(.dwui-accordion-section-toggle[aria-expanded=true]){margin-top:8px}:where(.dwui-accordion-section-toggle[aria-expanded=false]){margin-top:-10px}:where(.dwui-hourglass-loading){animation:dwui-hourglass-loading-spin 1.2s linear infinite}@keyframes dwui-hourglass-loading-spin{to{transform:rotate(360deg)}}:where(.dwui-label-button){display:inline-block;padding:2px 6px;border:1px solid var(--dwui-border-color-label-button, light-dark(#8f8f8f, #6b6f76));border-radius:3px;background:var(--dwui-background-label-button, light-dark(#f4f4f4, #3a3c40));color:var(--dwui-color-text-label-button, light-dark(#1a1a1a, #e6e6e6));font:inherit;cursor:pointer}:where(.dwui-label-button:not(:disabled):hover){background:var(--dwui-background-label-button-hover, light-dark(#e6e6e6, #474a50))}:where(.dwui-label-button:not(:disabled):active){background:var(--dwui-background-label-button-active, light-dark(#d6d6d6, #2f3135))}:where(.dwui-label-button:disabled){opacity:.6;cursor:not-allowed}:where(.dwui-label-button:focus-visible){outline:var(--dwui-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);outline-offset:var(--dwui-offset-focus-ring, 2px)}:where(.dwui-page-section){display:block;margin:4px 0 8px;padding-top:2px;font-size:var(--dwui-font-size-page-section, 12px);font-weight:500}:where(.dwui-page-section-title){display:flex;align-items:center;font-size:var(--dwui-font-size-page-section-title, 14px)}:where(.dwui-page-section-content){margin:8px 0 8px 16px}:where(.dwui-page-title){display:flex;align-items:center;justify-content:space-between;width:var(--dwui-width-page-title, auto);padding:4px;border-radius:4px;background:var(--dwui-background-page-title, linear-gradient(light-dark(#323232, #3c3f45) 0%, light-dark(rgb(32, 32, 31), #2b2d31) 25%, light-dark(rgb(32, 32, 31), #2b2d31) 75%, light-dark(#323232, #3c3f45) 100%));color:var(--dwui-color-text-page-title, rgb(220, 220, 220));font-size:var(--dwui-font-size-page-title, 14px);font-weight:var(--dwui-font-weight-page-title, normal)}:where(.dwui-tab-content[aria-checked=false]){display:none}:where(.dwui-tab-content[aria-checked=true]){display:block;position:relative;padding:4px 8px;overflow:hidden;animation:dwui-tab-slide-in var(--dwui-duration-tab-slide, .35s) var(--dwui-easing-tab-slide, cubic-bezier(.22, 1, .36, 1))}:where(.dwui-tab-loading){position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;background:var(--dwui-overlay-color-loading, light-dark(rgba(0, 0, 0, .25), rgba(0, 0, 0, .45)))}:where(.dwui-tab-loading-spinner){width:var(--dwui-size-loading-spinner, 40px);height:var(--dwui-size-loading-spinner, 40px);border:4px solid var(--dwui-border-color-loading-spinner-track, rgba(255, 255, 255, .4));border-top-color:var(--dwui-border-color-loading-spinner, #ffffff);border-radius:50%;animation:dwui-tab-loading-spin .8s linear infinite}@keyframes dwui-tab-loading-spin{to{transform:rotate(360deg)}}@keyframes dwui-tab-slide-in{0%{opacity:0;transform:translate(var(--dwui-distance-tab-slide, -128px))}to{opacity:1;transform:translate(0)}}:where(.dwui-tab-group){margin-bottom:8px}:where(.dwui-tab-headers){display:flex;flex-direction:row;flex-wrap:wrap;position:relative;margin-top:5px;padding-bottom:4px}:where(.dwui-tab-radio){position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}:where(.dwui-tab-item){display:block;min-width:100px;padding:0 4px;border:1px solid var(--dwui-border-color-tab, light-dark(#565656, #8a8a8a));border-bottom:1px solid var(--dwui-border-color-tab-header-accent, #5ab4bd);background:var(--dwui-background-tab-header, linear-gradient(light-dark(#1313c7, #2a3a8f), light-dark(navy, #141c4d)));line-height:2em;text-align:center;white-space:nowrap;color:var(--dwui-color-text-tab-header, azure);text-overflow:ellipsis;cursor:pointer;transition:all .2s ease}:where(.dwui-tab-radio:checked+.dwui-tab-item){background:var(--dwui-background-tab-header-selected, linear-gradient(light-dark(#1313c7, #2a3a8f), light-dark(rgb(149, 149, 234), #5a62b8), light-dark(#1313c7, #2a3a8f)));color:var(--dwui-color-text-tab-header-selected, azure);cursor:default}:where(.dwui-tab-radio:disabled+.dwui-tab-item){background:var(--dwui-background-tab-header-disabled, light-dark(gray, #4a4a4a));cursor:not-allowed}:where(.dwui-tab-item.dwui-tab-warn){background:var(--dwui-background-tab-header-warn, light-dark(#efef13, #8a8a10));color:var(--dwui-color-text-tab-header-warn, light-dark(midnightblue, #fffbd0))}:where(.dwui-tab-radio:checked+.dwui-tab-item.dwui-tab-warn){background:var(--dwui-background-tab-header-warn-selected, linear-gradient(light-dark(#fafa06, #8a8a10), light-dark(rgb(232, 238, 206), #a8a860), light-dark(#fafa06, #8a8a10)))}:where(.dwui-tab-item.dwui-tab-error){background:var(--dwui-background-tab-header-error, light-dark(red, #a01818));color:var(--dwui-color-text-tab-header-error, azure)}:where(.dwui-tab-radio:checked+.dwui-tab-item.dwui-tab-error){background:var(--dwui-background-tab-header-error-selected, linear-gradient(light-dark(#ff0000, #a01818), light-dark(rgb(240, 136, 136), #c86060), light-dark(#ff0000, #a01818)))}:where(.dwui-tab-radio:not(:checked)+.dwui-tab-item:hover){box-shadow:inset 0 0 0 999px var(--dwui-overlay-color-tab-header-hover, light-dark(rgba(255, 255, 255, .35), rgba(255, 255, 255, .15)))}:where(.dwui-tab-radio:focus-visible+.dwui-tab-item){outline:var(--dwui-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);outline-offset:var(--dwui-offset-focus-ring, 2px)}:where(.dwui-tab-items){height:100%;border:1px solid var(--dwui-border-color-tab, light-dark(#565656, #8a8a8a));overflow:hidden}

package/lib/tab-content.d.cts

@@ -0,0 +1,39 @@
+import { ClassValue, StyleValue } from 'vue';
+import { TabContentStatus } from './internal/tab-group-context.cjs';
+interface Props {
+    /** タブを識別するID。TabGroupのselectedTabLabelIdに渡す値 */
+    labelId: string;
+    /** タブの見出しの文字 */
+    description: string;
+    /** trueの場合、タブを選べなくし、中身も描画しない */
+    disabled?: boolean;
+    /** タブの見出しの状態。見出しの色が変わる */
+    status?: TabContentStatus;
+    /** タブの見出しに付けるclass */
+    headerClass?: ClassValue;
+    /** タブの見出しに付けるstyle */
+    headerStyle?: StyleValue;
+}
+interface Slots {
+    /** タブの見出しの文字の前に表示するアイコン */
+    icon?(): unknown;
+    /**
+     * タブの中身
+     * activated: タブが選ばれて表示されている間はtrue。中身のコンポーネントにpropsで渡し、選ばれたときの処理の契機にする
+     * setLoading: trueを渡すと読み込み中の表示にする。表示はTabGroupの#loadingスロット、未指定なら既定の表示
+     */
+    default?(props: {
+        activated: boolean;
+        setLoading: (loading: boolean) => void;
+    }): unknown;
+}
+type __VLS_Slots = Slots;
+declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/tab-group.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./tab-group.vue_vue_type_style_index_0_lang-CwVGYZAo.cjs");exports.default=e._sfc_main;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./tab-group.vue_vue_type_style_index_0_lang-CMaufRJV.cjs");exports.default=e._sfc_main;

package/lib/tab-group.d.cts

@@ -0,0 +1,44 @@
+import { ClassValue, StyleValue, VNode } from 'vue';
+interface Props {
+    /** ラジオボタンのname。未指定なら自動で採番する */
+    tabGroupName?: string;
+    /** selectedTabLabelIdが未指定のとき、trueならdisabledでない最初のタブを選ぶ。falseなら先頭のタブ(disabledなら中身は空になる) */
+    selectFirstEnabled?: boolean;
+    /** タブの見出しを並べる部分に付けるclass */
+    headerClass?: ClassValue;
+    /** タブの見出しを並べる部分に付けるstyle */
+    headerStyle?: StyleValue;
+    /** タブの見出しを移動する先(Teleportのto) */
+    teleport?: string;
+}
+type __VLS_Props = Props;
+interface Slots {
+    default?(): VNode[];
+    /** 読み込み中のTabContentに重ねて表示する内容。未指定なら既定の読み込み中表示 */
+    loading?(): VNode[];
+}
+type __VLS_Slots = Slots;
+type __VLS_ModelProps = {
+    /**
+     * 選択するタブのlabelId。未指定なら先頭のタブ
+     * 親がいつ代入しても選び直せるよう、v-model:selected-tab-label-idで同期する前提とする
+     */
+    'selectedTabLabelId'?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:selectedTabLabelId": (value: string | undefined) => any;
+} & {
+    "emit:changeSelectedTab": (labelId: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onEmit:changeSelectedTab"?: ((labelId: string) => any) | undefined;
+    "onUpdate:selectedTabLabelId"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/tab-group.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./tab-group.vue_vue_type_style_index_0_lang-CjnBkvvZ.js";
+import { _ as f } from "./tab-group.vue_vue_type_style_index_0_lang-C84mDEOC.js";
 export {
   f as default
 };

package/lib/{tab-group.vue_vue_type_style_index_0_lang-CjnBkvvZ.js → tab-group.vue_vue_type_style_index_0_lang-C84mDEOC.js}

@@ -1,5 +1,5 @@
 import { defineComponent as L, useModel as B, useSlots as N, useId as x, computed as y, ref as A, provide as E, onMounted as M, openBlock as s, createElementBlock as i, createBlock as _, Teleport as F, createElementVNode as o, normalizeStyle as v, normalizeClass as g, Fragment as S, renderList as G, unref as c, createVNode as V, createSlots as j, withCtx as I, createTextVNode as z, toDisplayString as D, resolveDynamicComponent as O, renderSlot as H, mergeModels as C } from "vue";
-import { _ as K } from "./label-icon.vue_vue_type_style_index_0_lang-bQFkQ_gC.js";
+import { _ as K } from "./label-icon.vue_vue_type_style_index_0_lang-me52HE2V.js";
 import { t as P, _ as q } from "./tab-content.vue_vue_type_style_index_0_lang-CcQLHmIF.js";
 const J = { class: "dwui-tab-group" }, Q = ["id", "name", "disabled", "checked", "onChange"], R = ["for", "data-test-tab-content-control"], U = { class: "dwui-tab-items" }, Z = /* @__PURE__ */ L({
   __name: "tab-group",

package/lib/{tab-group.vue_vue_type_style_index_0_lang-CwVGYZAo.cjs → tab-group.vue_vue_type_style_index_0_lang-CMaufRJV.cjs}

@@ -1 +1 @@
-"use strict";const e=require("vue"),v=require("./label-icon.vue_vue_type_style_index_0_lang-C2URq6GP.cjs"),m=require("./tab-content.vue_vue_type_style_index_0_lang-BeCi7Xkp.cjs"),g={class:"dwui-tab-group"},S=["id","name","disabled","checked","onChange"],C=["for","data-test-tab-content-control"],I={class:"dwui-tab-items"},k=e.defineComponent({__name:"tab-group",props:e.mergeModels({tabGroupName:{},selectFirstEnabled:{type:Boolean},headerClass:{type:[Boolean,null,String,Object,Array]},headerStyle:{type:[Boolean,null,String,Object,Array]},teleport:{}},{selectedTabLabelId:{},selectedTabLabelIdModifiers:{}}),emits:e.mergeModels(["emit:changeSelectedTab"],["update:selectedTabLabelId"]),setup(r,{emit:h}){const n=r,_=h,o=e.useModel(r,"selectedTabLabelId"),c=e.useSlots(),s=n.tabGroupName??e.useId(),y=a=>{if(a.type!==m._sfc_main)return;const l=a.props??{},t=l.disabled;return{labelId:String(l["label-id"]??l.labelId),description:l.description,disabled:t===""||!!t,status:l.status,headerClass:l["header-class"]??l.headerClass,headerStyle:l["header-style"]??l.headerStyle,icon:a.children?.icon}},d=e.computed(()=>{const a=[];for(const l of c.default?.()??[]){const t=Array.isArray(l.children)?l.children:[l];for(const b of t){const p=y(b);p&&a.push(p)}}return a}),i=e.computed(()=>o.value!=null?o.value:(n.selectFirstEnabled?d.value.find(l=>!l.disabled):d.value[0])?.labelId),u=e.ref(!1);e.provide(m.tabGroupContextKey,{activeLabelId:i,mounted:u,loadingSlot:()=>c.loading}),e.onMounted(()=>{u.value=!0});const f=a=>{o.value=a,_("emit:changeSelectedTab",a)};return(a,l)=>(e.openBlock(),e.createElementBlock("div",g,[(e.openBlock(),e.createBlock(e.Teleport,{to:n.teleport??"body",disabled:n.teleport==null},[e.createElementVNode("div",{class:e.normalizeClass(["dwui-tab-headers",n.headerClass]),style:e.normalizeStyle(n.headerStyle)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.value,t=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:t.labelId},[e.createElementVNode("input",{id:`${e.unref(s)}-${t.labelId}`,type:"radio",class:"dwui-tab-radio",name:e.unref(s),disabled:t.disabled,checked:t.labelId===i.value,onChange:b=>f(t.labelId)},null,40,S),e.createElementVNode("label",{for:`${e.unref(s)}-${t.labelId}`,class:e.normalizeClass(["dwui-tab-item",[t.status!=null?`dwui-tab-${t.status}`:void 0,t.headerClass]]),style:e.normalizeStyle(t.headerStyle),"data-test-tab-content-control":t.labelId},[e.createVNode(v._sfc_main,null,e.createSlots({default:e.withCtx(()=>[e.createTextVNode(" "+e.toDisplayString(t.description),1)]),_:2},[t.icon!=null?{name:"icon",fn:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.icon)))]),key:"0"}:void 0]),1024)],14,C)],64))),128))],6)],8,["to","disabled"])),e.createElementVNode("div",I,[e.renderSlot(a.$slots,"default")])]))}});exports._sfc_main=k;
+"use strict";const e=require("vue"),v=require("./label-icon.vue_vue_type_style_index_0_lang-D9Cimu20.cjs"),m=require("./tab-content.vue_vue_type_style_index_0_lang-BeCi7Xkp.cjs"),g={class:"dwui-tab-group"},S=["id","name","disabled","checked","onChange"],C=["for","data-test-tab-content-control"],I={class:"dwui-tab-items"},k=e.defineComponent({__name:"tab-group",props:e.mergeModels({tabGroupName:{},selectFirstEnabled:{type:Boolean},headerClass:{type:[Boolean,null,String,Object,Array]},headerStyle:{type:[Boolean,null,String,Object,Array]},teleport:{}},{selectedTabLabelId:{},selectedTabLabelIdModifiers:{}}),emits:e.mergeModels(["emit:changeSelectedTab"],["update:selectedTabLabelId"]),setup(r,{emit:h}){const n=r,_=h,o=e.useModel(r,"selectedTabLabelId"),c=e.useSlots(),s=n.tabGroupName??e.useId(),y=a=>{if(a.type!==m._sfc_main)return;const l=a.props??{},t=l.disabled;return{labelId:String(l["label-id"]??l.labelId),description:l.description,disabled:t===""||!!t,status:l.status,headerClass:l["header-class"]??l.headerClass,headerStyle:l["header-style"]??l.headerStyle,icon:a.children?.icon}},d=e.computed(()=>{const a=[];for(const l of c.default?.()??[]){const t=Array.isArray(l.children)?l.children:[l];for(const b of t){const p=y(b);p&&a.push(p)}}return a}),i=e.computed(()=>o.value!=null?o.value:(n.selectFirstEnabled?d.value.find(l=>!l.disabled):d.value[0])?.labelId),u=e.ref(!1);e.provide(m.tabGroupContextKey,{activeLabelId:i,mounted:u,loadingSlot:()=>c.loading}),e.onMounted(()=>{u.value=!0});const f=a=>{o.value=a,_("emit:changeSelectedTab",a)};return(a,l)=>(e.openBlock(),e.createElementBlock("div",g,[(e.openBlock(),e.createBlock(e.Teleport,{to:n.teleport??"body",disabled:n.teleport==null},[e.createElementVNode("div",{class:e.normalizeClass(["dwui-tab-headers",n.headerClass]),style:e.normalizeStyle(n.headerStyle)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.value,t=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:t.labelId},[e.createElementVNode("input",{id:`${e.unref(s)}-${t.labelId}`,type:"radio",class:"dwui-tab-radio",name:e.unref(s),disabled:t.disabled,checked:t.labelId===i.value,onChange:b=>f(t.labelId)},null,40,S),e.createElementVNode("label",{for:`${e.unref(s)}-${t.labelId}`,class:e.normalizeClass(["dwui-tab-item",[t.status!=null?`dwui-tab-${t.status}`:void 0,t.headerClass]]),style:e.normalizeStyle(t.headerStyle),"data-test-tab-content-control":t.labelId},[e.createVNode(v._sfc_main,null,e.createSlots({default:e.withCtx(()=>[e.createTextVNode(" "+e.toDisplayString(t.description),1)]),_:2},[t.icon!=null?{name:"icon",fn:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.icon)))]),key:"0"}:void 0]),1024)],14,C)],64))),128))],6)],8,["to","disabled"])),e.createElementVNode("div",I,[e.renderSlot(a.$slots,"default")])]))}});exports._sfc_main=k;

package/lib/types/label-preset.d.cts

@@ -0,0 +1,12 @@
+import { Component } from 'vue';
+/**
+ * アイコンとラベルの組み合わせ
+ */
+export interface LabelPreset {
+    /** アイコンのコンポーネント */
+    icon: Component;
+    /** アイコンに渡すProps */
+    iconProps?: Record<string, unknown>;
+    /** ラベル。言語切替に追従させる場合は、描画のたびに呼ばれる関数で渡す */
+    label: string | (() => string);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digitalwalletcorp/vue-core",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "type": "module",
   "description": "Basic UI components for Vue 3",
   "main": "lib/index.cjs",
@@ -11,31 +11,47 @@
   ],
   "exports": {
     ".": {
-      "types": "./lib/index.d.ts",
-      "import": "./lib/index.js",
-      "require": "./lib/index.cjs"
+      "import": {
+        "types": "./lib/index.d.ts",
+        "default": "./lib/index.js"
+      },
+      "require": {
+        "types": "./lib/index.d.cts",
+        "default": "./lib/index.cjs"
+      }
     },
     "./nuxt": {
       "types": "./lib/nuxt.d.ts",
       "import": "./lib/nuxt.js"
     },
     "./register": {
-      "types": "./lib/register.d.ts",
-      "import": "./lib/register.js",
-      "require": "./lib/register.cjs"
+      "import": {
+        "types": "./lib/register.d.ts",
+        "default": "./lib/register.js"
+      },
+      "require": {
+        "types": "./lib/register.d.cts",
+        "default": "./lib/register.cjs"
+      }
     },
     "./global": {
       "types": "./lib/global.d.ts"
     },
     "./style.css": "./lib/style.css",
     "./*": {
-      "types": "./lib/*.d.ts",
-      "import": "./lib/*.js",
-      "require": "./lib/*.cjs"
+      "import": {
+        "types": "./lib/*.d.ts",
+        "default": "./lib/*.js"
+      },
+      "require": {
+        "types": "./lib/*.d.cts",
+        "default": "./lib/*.cjs"
+      }
     }
   },
   "scripts": {
     "build": "vite build",
+    "yarn:dedupe": "npx yarn-deduplicate --strategy highest yarn.lock",
     "install:dev": "rm -rf lib dest && find node_modules -mindepth 1 -delete && yarn install",
     "typecheck": "vue-tsc --noEmit -p tsconfig.json",
     "version:patch": "npm version patch",
@@ -68,11 +84,11 @@
     "src/**/*"
   ],
   "peerDependencies": {
-    "@digitalwalletcorp/vue-svg-icons": "^1.13.0",
+    "@digitalwalletcorp/vue-svg-icons": "^1.15.3",
     "vue": "^3.5.29"
   },
   "devDependencies": {
-    "@digitalwalletcorp/vue-svg-icons": "^1.13.0",
+    "@digitalwalletcorp/vue-svg-icons": "^1.15.3",
     "@nuxt/kit": "^3.17.5",
     "@types/node": "24.13.6",
     "@vitejs/plugin-vue": "^6.0.0",

package/src/accordion-fieldset.vue

@@ -6,7 +6,7 @@
     class="dwui-accordion-fieldset"
     :disabled="props.disabled"
   >
-    <legend>
+    <legend class="dwui-accordion-legend">
       <button
         type="button"
         class="dwui-accordion-toggle"
@@ -85,7 +85,7 @@ onMounted(() => {
   position: relative;
 }
 
-/* 詳細度0のため、利用側がbutton要素に装飾を当てている場合はそちらが優先される。打ち消しは利用側のCSSで行う */
+/* 開閉ボタンは押しボタンではなく凡例と一体の操作として見せるため、既定では枠・背景を持たない */
 :where(.dwui-accordion-toggle) {
   display: inline-flex;
   align-items: center;
@@ -103,6 +103,11 @@ onMounted(() => {
   cursor: not-allowed;
 }
 
+:where(.dwui-accordion-toggle:focus-visible) {
+  outline: var(--dwui-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);
+  outline-offset: var(--dwui-offset-focus-ring, 2px);
+}
+
 :where(.dwui-accordion-contents) {
   position: relative;
   width: fit-content;

package/src/accordion-section.vue

@@ -160,7 +160,7 @@ onMounted(() => {
   content: '';
   position: absolute;
   inset: 0;
-  background-image: linear-gradient(180deg, transparent 0%, transparent 60%, var(--dwui-accordion-section-fade, Canvas) 100%);
+  background-image: linear-gradient(180deg, transparent 0%, transparent 60%, var(--dwui-color-accordion-section-fade, Canvas) 100%);
   pointer-events: none;
 }
 
@@ -172,9 +172,14 @@ onMounted(() => {
   width: 100%;
 }
 
+/* 開閉ボタンは押しボタンではなくアイコンとラベルの操作として見せるため、既定では枠・背景を持たない */
 :where(.dwui-accordion-section-toggle) {
   display: inline-flex;
   align-items: center;
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
   cursor: pointer;
 }
 
@@ -183,6 +188,11 @@ onMounted(() => {
   cursor: not-allowed;
 }
 
+:where(.dwui-accordion-section-toggle:focus-visible) {
+  outline: var(--dwui-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);
+  outline-offset: var(--dwui-offset-focus-ring, 2px);
+}
+
 :where(.dwui-accordion-section-toggle[aria-expanded='true']) {
   margin-top: 8px;
 }

package/src/label-button.vue

@@ -2,7 +2,7 @@
 アイコンとラベルを持つボタン
 -->
 <template>
-  <button>
+  <button class="dwui-label-button">
     <LabelIcon
       :preset="props.preset"
       :gap="props.gap"
@@ -55,3 +55,34 @@ interface Slots {
 }
 const slots = defineSlots<Slots>();
 </script>
+
+<style>
+:where(.dwui-label-button) {
+  display: inline-block;
+  padding: 2px 6px;
+  border: 1px solid var(--dwui-border-color-label-button, light-dark(#8f8f8f, #6b6f76));
+  border-radius: 3px;
+  background: var(--dwui-background-label-button, light-dark(#f4f4f4, #3a3c40));
+  color: var(--dwui-color-text-label-button, light-dark(#1a1a1a, #e6e6e6));
+  font: inherit;
+  cursor: pointer;
+}
+
+:where(.dwui-label-button:not(:disabled):hover) {
+  background: var(--dwui-background-label-button-hover, light-dark(#e6e6e6, #474a50));
+}
+
+:where(.dwui-label-button:not(:disabled):active) {
+  background: var(--dwui-background-label-button-active, light-dark(#d6d6d6, #2f3135));
+}
+
+:where(.dwui-label-button:disabled) {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+:where(.dwui-label-button:focus-visible) {
+  outline: var(--dwui-width-focus-ring, 2px) solid var(--dwui-outline-color-focus-ring, Highlight);
+  outline-offset: var(--dwui-offset-focus-ring, 2px);
+}
+</style>

package/src/label-icon.vue

@@ -4,7 +4,7 @@
 <template>
   <span
     class="dwui-label-icon"
-    :style="props.gap == null ? undefined : { '--dwui-label-icon-gap': props.gap }"
+    :style="props.gap == null ? undefined : { '--dwui-gap-label-icon': props.gap }"
   >
     <slot name="icon">
       <component
@@ -70,6 +70,6 @@ const slots = defineSlots<Slots>();
 
 /* アイコンとラベルの間隔。gapはflex専用のためmarginで空ける */
 :where(.dwui-label-icon > .dwui-label:not(:first-child)) {
-  margin-left: var(--dwui-label-icon-gap, 0.25em);
+  margin-left: var(--dwui-gap-label-icon, 0.25em);
 }
 </style>

package/src/page-section.vue

@@ -87,14 +87,14 @@ const presetIcon = computed((): { component: Component; props: Record<string, un
   display: block;
   margin: 4px 0 8px;
   padding-top: 2px;
-  font-size: var(--dwui-page-section-font-size, 12px);
+  font-size: var(--dwui-font-size-page-section, 12px);
   font-weight: 500;
 }
 
 :where(.dwui-page-section-title) {
   display: flex;
   align-items: center;
-  font-size: var(--dwui-page-section-title-font-size, 14px);
+  font-size: var(--dwui-font-size-page-section-title, 14px);
 }
 
 :where(.dwui-page-section-content) {

package/src/page-title.vue

@@ -45,12 +45,12 @@ const slots = defineSlots<Slots>();
   display: flex;
   align-items: center;
   justify-content: space-between;
-  width: var(--dwui-page-title-width, auto);
+  width: var(--dwui-width-page-title, auto);
   padding: 4px;
   border-radius: 4px;
-  background: var(--dwui-page-title-bg, linear-gradient(#323232 0%, rgb(32, 32, 31) 25%, rgb(32, 32, 31) 75%, #323232 100%));
-  color: var(--dwui-page-title-text, rgb(220, 220, 220));
-  font-size: var(--dwui-page-title-font-size, 14px);
-  font-weight: var(--dwui-page-title-font-weight, normal);
+  background: var(--dwui-background-page-title, linear-gradient(light-dark(#323232, #3c3f45) 0%, light-dark(rgb(32, 32, 31), #2b2d31) 25%, light-dark(rgb(32, 32, 31), #2b2d31) 75%, light-dark(#323232, #3c3f45) 100%));
+  color: var(--dwui-color-text-page-title, rgb(220, 220, 220));
+  font-size: var(--dwui-font-size-page-title, 14px);
+  font-weight: var(--dwui-font-weight-page-title, normal);
 }
 </style>

package/src/tab-content.vue

@@ -106,7 +106,7 @@ const setLoading = (value: boolean) => {
   padding: 4px 8px;
   overflow: hidden;
   /* 全幅を横断すると速度が出てカクつくため、既定は固定の移動量とease-outとフェードでスライドインする */
-  animation: dwui-tab-slide-in var(--dwui-tab-slide-duration, 0.35s) var(--dwui-tab-slide-easing, cubic-bezier(0.22, 1, 0.36, 1));
+  animation: dwui-tab-slide-in var(--dwui-duration-tab-slide, 0.35s) var(--dwui-easing-tab-slide, cubic-bezier(0.22, 1, 0.36, 1));
 }
 
 :where(.dwui-tab-loading) {
@@ -116,14 +116,14 @@ const setLoading = (value: boolean) => {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--dwui-loading-overlay, rgba(0, 0, 0, 0.25));
+  background: var(--dwui-overlay-color-loading, light-dark(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.45)));
 }
 
 :where(.dwui-tab-loading-spinner) {
-  width: var(--dwui-loading-spinner-size, 40px);
-  height: var(--dwui-loading-spinner-size, 40px);
-  border: 4px solid var(--dwui-loading-spinner-track, rgba(255, 255, 255, 0.4));
-  border-top-color: var(--dwui-loading-spinner-color, #ffffff);
+  width: var(--dwui-size-loading-spinner, 40px);
+  height: var(--dwui-size-loading-spinner, 40px);
+  border: 4px solid var(--dwui-border-color-loading-spinner-track, rgba(255, 255, 255, 0.4));
+  border-top-color: var(--dwui-border-color-loading-spinner, #ffffff);
   border-radius: 50%;
   animation: dwui-tab-loading-spin 0.8s linear infinite;
 }
@@ -137,7 +137,7 @@ const setLoading = (value: boolean) => {
 @keyframes dwui-tab-slide-in {
   0% {
     opacity: 0;
-    transform: translateX(var(--dwui-tab-slide-distance, -128px));
+    transform: translateX(var(--dwui-distance-tab-slide, -128px));
   }
   100% {
     opacity: 1;