@digitalwalletcorp/vue-core 0.3.0 → 1.0.0

package/README.md

@@ -93,13 +93,42 @@ export default defineNuxtConfig({
 >
 > Components such as `AccordionFieldset` rely on [@digitalwalletcorp/vue-svg-icons](https://www.npmjs.com/package/@digitalwalletcorp/vue-svg-icons). Importing its stylesheet ensures icons align properly with text.
 
+##### ⚙️ Adapting to your application
+
+The components do not know your application's theme. Colors are referenced through `--dwui-*` CSS variables with fallbacks, and default styles have zero specificity (`:where()`).
+We recommend keeping a `vue-core-variables.css` in your application that connects your application's variables to the `--dwui-*` variables, and loading it after the stylesheets above. The variables of each component are listed in its document.
+
+```css
+/* vue-core-variables.css */
+:root {
+  --dwui-tab-header-bg: var(--app-tab-header-background);
+  --dwui-tab-header-text: var(--app-tab-header-text);
+  --dwui-tab-header-selected-bg: var(--app-tab-header-selected-background);
+  --dwui-tab-header-selected-text: var(--app-tab-header-selected-text);
+}
+```
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  css: [
+    '@digitalwalletcorp/vue-core/style.css',
+    '@digitalwalletcorp/vue-svg-icons/style.css',
+    '@/assets/css/default.css', // your global CSS
+    '@/assets/css/vue-core-variables.css'
+  ]
+});
+```
+
 #### 🧰 Components
 
 | Component | Description |
 | --------- | ----------- |
 | [`AccordionFieldset`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/accordion-fieldset.md) | A fieldset whose contents can be collapsed and expanded from the legend. |
+| [`HourglassLoading`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/hourglass-loading.md) | Shows an hourglass in place of a value while it is loading. |
 | [`LabelIcon`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/label-icon.md) | Displays an icon and a text label side by side. |
 | [`LabelButton`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/label-button.md) | Renders a button containing an icon and a text label. |
+| [`TabGroup` / `TabContent`](https://github.com/digitalwalletcorp/vue-core/blob/main/docs/components/tab-group.md) | Switches between contents with tab headers. |
 
 #### 📜 License
 

package/lib/components-CvmuAs2C.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("./accordion-fieldset.vue_vue_type_style_index_0_lang-Cod0KnrE.cjs"),_=require("./hourglass-loading.vue_vue_type_style_index_0_lang-C72UVA9W.cjs"),n=require("./label-button.vue_vue_type_script_setup_true_lang-DqhdCgmJ.cjs"),t=require("./label-icon.vue_vue_type_style_index_0_lang-C2URq6GP.cjs"),o=require("./tab-content.vue_vue_type_style_index_0_lang-BeCi7Xkp.cjs"),s=require("./tab-group.vue_vue_type_style_index_0_lang-CwVGYZAo.cjs"),u=Object.freeze(Object.defineProperty({__proto__:null,AccordionFieldset:e._sfc_main,HourglassLoading:_._sfc_main,LabelButton:n._sfc_main,LabelIcon:t._sfc_main,TabContent:o._sfc_main,TabGroup:s._sfc_main},Symbol.toStringTag,{value:"Module"}));exports.components=u;

package/lib/components-p1BluzXb.js

@@ -0,0 +1,18 @@
+import { _ as o } from "./accordion-fieldset.vue_vue_type_style_index_0_lang-Dk5Id0dl.js";
+import { _ } from "./hourglass-loading.vue_vue_type_style_index_0_lang-DkUGIxQ2.js";
+import { _ as a } from "./label-button.vue_vue_type_script_setup_true_lang-CoHrTUSs.js";
+import { _ as r } from "./label-icon.vue_vue_type_style_index_0_lang-bQFkQ_gC.js";
+import { _ as m } from "./tab-content.vue_vue_type_style_index_0_lang-CcQLHmIF.js";
+import { _ as t } from "./tab-group.vue_vue_type_style_index_0_lang-CjnBkvvZ.js";
+const p = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  AccordionFieldset: o,
+  HourglassLoading: _,
+  LabelButton: a,
+  LabelIcon: r,
+  TabContent: m,
+  TabGroup: t
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  p as c
+};

package/lib/components.d.ts

@@ -1,3 +1,6 @@
 export { default as AccordionFieldset } from './accordion-fieldset';
+export { default as HourglassLoading } from './hourglass-loading';
 export { default as LabelButton } from './label-button';
 export { default as LabelIcon } from './label-icon';
+export { default as TabContent } from './tab-content';
+export { default as TabGroup } from './tab-group';

package/lib/hourglass-loading.cjs

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

package/lib/hourglass-loading.d.ts

@@ -0,0 +1,23 @@
+interface Props {
+    /** ローディング表示するか */
+    loading: boolean;
+    /** 砂が落ち切るまでの秒数。未指定ならSvgHourglassの既定値に任せる */
+    duration?: number;
+    /** 表示サイズ(高さ)。数値はpxとして扱う */
+    size?: number | string;
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    size: number | string;
+}, {}, {}, {}, 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/hourglass-loading.js

@@ -0,0 +1,4 @@
+import { _ as f } from "./hourglass-loading.vue_vue_type_style_index_0_lang-DkUGIxQ2.js";
+export {
+  f as default
+};

package/lib/hourglass-loading.vue_vue_type_style_index_0_lang-C72UVA9W.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("vue"),r=require("@digitalwalletcorp/vue-svg-icons"),i=e.defineComponent({__name:"hourglass-loading",props:{loading:{type:Boolean},duration:{},size:{default:"1.2em"}},setup(n){const o=n;return(s,a)=>o.loading?(e.openBlock(),e.createBlock(e.unref(r.SvgHourglass),{key:0,duration:o.duration,size:o.size,class:"dwui-hourglass-loading"},null,8,["duration","size"])):e.renderSlot(s.$slots,"default",{},void 0,void 0,1)}});exports._sfc_main=i;

package/lib/hourglass-loading.vue_vue_type_style_index_0_lang-DkUGIxQ2.js

@@ -0,0 +1,22 @@
+import { defineComponent as r, openBlock as s, createBlock as a, unref as i, renderSlot as t } from "vue";
+import { SvgHourglass as l } from "@digitalwalletcorp/vue-svg-icons";
+const c = /* @__PURE__ */ r({
+  __name: "hourglass-loading",
+  props: {
+    loading: { type: Boolean },
+    duration: {},
+    size: { default: "1.2em" }
+  },
+  setup(e) {
+    const o = e;
+    return (n, d) => o.loading ? (s(), a(i(l), {
+      key: 0,
+      duration: o.duration,
+      size: o.size,
+      class: "dwui-hourglass-loading"
+    }, null, 8, ["duration", "size"])) : t(n.$slots, "default", {}, void 0, void 0, 1);
+  }
+});
+export {
+  c as _
+};

package/lib/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./accordion-fieldset.vue_vue_type_style_index_0_lang-Cod0KnrE.cjs"),_=require("./label-button.vue_vue_type_script_setup_true_lang-DqhdCgmJ.cjs"),t=require("./label-icon.vue_vue_type_style_index_0_lang-C2URq6GP.cjs");exports.AccordionFieldset=e._sfc_main;exports.LabelButton=_._sfc_main;exports.LabelIcon=t._sfc_main;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./accordion-fieldset.vue_vue_type_style_index_0_lang-Cod0KnrE.cjs"),_=require("./hourglass-loading.vue_vue_type_style_index_0_lang-C72UVA9W.cjs"),t=require("./label-button.vue_vue_type_script_setup_true_lang-DqhdCgmJ.cjs"),n=require("./label-icon.vue_vue_type_style_index_0_lang-C2URq6GP.cjs"),u=require("./tab-content.vue_vue_type_style_index_0_lang-BeCi7Xkp.cjs"),a=require("./tab-group.vue_vue_type_style_index_0_lang-CwVGYZAo.cjs");exports.AccordionFieldset=e._sfc_main;exports.HourglassLoading=_._sfc_main;exports.LabelButton=t._sfc_main;exports.LabelIcon=n._sfc_main;exports.TabContent=u._sfc_main;exports.TabGroup=a._sfc_main;

package/lib/index.d.ts

@@ -1,2 +1,3 @@
 export * from './components';
 export type { LabelPreset } from './types/label-preset';
+export type { TabContentStatus } from './internal/tab-group-context';

package/lib/index.js

@@ -1,8 +1,14 @@
-import { _ as r } from "./accordion-fieldset.vue_vue_type_style_index_0_lang-Dk5Id0dl.js";
-import { _ as a } from "./label-button.vue_vue_type_script_setup_true_lang-CoHrTUSs.js";
-import { _ as c } from "./label-icon.vue_vue_type_style_index_0_lang-bQFkQ_gC.js";
+import { _ as a } from "./accordion-fieldset.vue_vue_type_style_index_0_lang-Dk5Id0dl.js";
+import { _ as t } from "./hourglass-loading.vue_vue_type_style_index_0_lang-DkUGIxQ2.js";
+import { _ as p } from "./label-button.vue_vue_type_script_setup_true_lang-CoHrTUSs.js";
+import { _ as m } from "./label-icon.vue_vue_type_style_index_0_lang-bQFkQ_gC.js";
+import { _ as x } from "./tab-content.vue_vue_type_style_index_0_lang-CcQLHmIF.js";
+import { _ as b } from "./tab-group.vue_vue_type_style_index_0_lang-CjnBkvvZ.js";
 export {
-  r as AccordionFieldset,
-  a as LabelButton,
-  c as LabelIcon
+  a as AccordionFieldset,
+  t as HourglassLoading,
+  p as LabelButton,
+  m as LabelIcon,
+  x as TabContent,
+  b as TabGroup
 };

package/lib/internal/tab-group-context.d.ts

@@ -0,0 +1,16 @@
+import { ComputedRef, InjectionKey, Ref, Slot } from 'vue';
+/** タブの見出しの状態 */
+export type TabContentStatus = 'warn' | 'error';
+/**
+ * TabGroupからTabContentへ渡す状態
+ * TabGroupとTabContentの間だけで使い、利用側には公開しない
+ */
+export interface TabGroupContext {
+    /** 選択中のタブのlabelId */
+    activeLabelId: ComputedRef<string | undefined>;
+    /** TabGroupがマウント済みか */
+    mounted: Ref<boolean>;
+    /** TabGroupの#loadingスロット。未指定ならTabContentは既定の読み込み中表示を出す */
+    loadingSlot: () => Slot | undefined;
+}
+export declare const tabGroupContextKey: InjectionKey<TabGroupContext>;

package/lib/nuxt.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@nuxt/kit"),r=require("./components-CrmajA9z.cjs");var t=typeof document<"u"?document.currentScript:null;const u=e.defineNuxtModule({meta:{name:"@digitalwalletcorp/vue-core",configKey:"vueCore"},setup(){const n=e.createResolver(typeof document>"u"?require("url").pathToFileURL(__filename).href:t&&t.tagName.toUpperCase()==="SCRIPT"&&t.src||new URL("nuxt.cjs",document.baseURI).href);for(const o of Object.keys(r.components))e.addComponent({name:o,export:o,filePath:n.resolve("./index")})}});exports.default=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@nuxt/kit"),r=require("./components-CvmuAs2C.cjs");var t=typeof document<"u"?document.currentScript:null;const u=e.defineNuxtModule({meta:{name:"@digitalwalletcorp/vue-core",configKey:"vueCore"},setup(){const n=e.createResolver(typeof document>"u"?require("url").pathToFileURL(__filename).href:t&&t.tagName.toUpperCase()==="SCRIPT"&&t.src||new URL("nuxt.cjs",document.baseURI).href);for(const o of Object.keys(r.components))e.addComponent({name:o,export:o,filePath:n.resolve("./index")})}});exports.default=u;

package/lib/nuxt.js

@@ -1,5 +1,5 @@
 import { defineNuxtModule as t, createResolver as r, addComponent as n } from "@nuxt/kit";
-import { c as a } from "./components-B3xZ0gFq.js";
+import { c as a } from "./components-p1BluzXb.js";
 const c = t({
   meta: {
     name: "@digitalwalletcorp/vue-core",

package/lib/register.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./components-CrmajA9z.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-CvmuAs2C.cjs");function r(e){for(const[o,n]of Object.entries(t.components))e.component(o,n)}exports.registerComponents=r;

package/lib/register.js

@@ -1,4 +1,4 @@
-import { c as t } from "./components-B3xZ0gFq.js";
+import { c as t } from "./components-p1BluzXb.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-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-hourglass-loading){animation:dwui-hourglass-loading-spin 1.2s linear infinite}@keyframes dwui-hourglass-loading-spin{to{transform:rotate(360deg)}}: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 .35s 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(-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}

package/lib/tab-content.cjs

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

package/lib/tab-content.d.ts

@@ -0,0 +1,39 @@
+import { ClassValue, StyleValue } from 'vue';
+import { TabContentStatus } from './internal/tab-group-context';
+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-content.js

@@ -0,0 +1,4 @@
+import { _ as f } from "./tab-content.vue_vue_type_style_index_0_lang-CcQLHmIF.js";
+export {
+  f as default
+};

package/lib/tab-content.vue_vue_type_style_index_0_lang-BeCi7Xkp.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("vue"),s=Symbol("dwui-tab-group"),u=["aria-label","aria-checked","aria-description","aria-busy","data-test-tab-content"],p={key:0,class:"dwui-tab-loading"},b={key:1,class:"dwui-tab-loading-spinner"},m=e.defineComponent({__name:"tab-content",props:{labelId:{},description:{},disabled:{type:Boolean},status:{},headerClass:{type:[Boolean,null,String,Object,Array]},headerStyle:{type:[Boolean,null,String,Object,Array]}},setup(i){const t=i,a=e.inject(s,void 0),o=e.ref(!1),l=()=>a?.loadingSlot(),c=e.computed(()=>a?.activeLabelId.value===t.labelId),d=e.computed(()=>!!a?.mounted.value&&c.value),r=n=>{o.value=n};return(n,v)=>t.disabled?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:"dwui-tab-content","aria-label":t.labelId,"aria-checked":c.value?"true":"false","aria-description":t.description,"aria-busy":o.value?"true":void 0,"data-test-tab-content":t.labelId},[e.renderSlot(n.$slots,"default",{activated:d.value,setLoading:r}),o.value?(e.openBlock(),e.createElementBlock("div",p,[l()!=null?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(l()),{key:0})):(e.openBlock(),e.createElementBlock("span",b))])):e.createCommentVNode("",!0)],8,u))}});exports._sfc_main=m;exports.tabGroupContextKey=s;

package/lib/tab-content.vue_vue_type_style_index_0_lang-CcQLHmIF.js

@@ -0,0 +1,44 @@
+import { defineComponent as p, inject as v, ref as y, computed as i, openBlock as t, createElementBlock as l, renderSlot as m, createBlock as _, resolveDynamicComponent as g, createCommentVNode as d } from "vue";
+const k = /* @__PURE__ */ Symbol("dwui-tab-group"), h = ["aria-label", "aria-checked", "aria-description", "aria-busy", "data-test-tab-content"], f = {
+  key: 0,
+  class: "dwui-tab-loading"
+}, S = {
+  key: 1,
+  class: "dwui-tab-loading-spinner"
+}, I = /* @__PURE__ */ p({
+  __name: "tab-content",
+  props: {
+    labelId: {},
+    description: {},
+    disabled: { type: Boolean },
+    status: {},
+    headerClass: { type: [Boolean, null, String, Object, Array] },
+    headerStyle: { type: [Boolean, null, String, Object, Array] }
+  },
+  setup(r) {
+    const e = r, a = v(k, void 0), o = y(!1), s = () => a?.loadingSlot(), c = i(() => a?.activeLabelId.value === e.labelId), u = i(() => !!a?.mounted.value && c.value), b = (n) => {
+      o.value = n;
+    };
+    return (n, B) => e.disabled ? d("", !0) : (t(), l("div", {
+      key: 0,
+      class: "dwui-tab-content",
+      "aria-label": e.labelId,
+      "aria-checked": c.value ? "true" : "false",
+      "aria-description": e.description,
+      "aria-busy": o.value ? "true" : void 0,
+      "data-test-tab-content": e.labelId
+    }, [
+      m(n.$slots, "default", {
+        activated: u.value,
+        setLoading: b
+      }),
+      o.value ? (t(), l("div", f, [
+        s() != null ? (t(), _(g(s()), { key: 0 })) : (t(), l("span", S))
+      ])) : d("", !0)
+    ], 8, h));
+  }
+});
+export {
+  I as _,
+  k as t
+};

package/lib/tab-group.cjs

@@ -0,0 +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;

package/lib/tab-group.d.ts

@@ -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

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

package/lib/tab-group.vue_vue_type_style_index_0_lang-CjnBkvvZ.js

@@ -0,0 +1,103 @@
+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 { 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",
+  props: /* @__PURE__ */ C({
+    tabGroupName: {},
+    selectFirstEnabled: { type: Boolean },
+    headerClass: { type: [Boolean, null, String, Object, Array] },
+    headerStyle: { type: [Boolean, null, String, Object, Array] },
+    teleport: {}
+  }, {
+    selectedTabLabelId: {},
+    selectedTabLabelIdModifiers: {}
+  }),
+  emits: /* @__PURE__ */ C(["emit:changeSelectedTab"], ["update:selectedTabLabelId"]),
+  setup(u, { emit: T }) {
+    const l = u, $ = T, d = B(u, "selectedTabLabelId"), b = N(), n = l.tabGroupName ?? x(), k = (a) => {
+      if (a.type !== q)
+        return;
+      const t = a.props ?? {}, e = t.disabled;
+      return {
+        labelId: String(t["label-id"] ?? t.labelId),
+        description: t.description,
+        // 属性だけを書いた場合(<TabContent disabled>)は空文字になる
+        disabled: e === "" || !!e,
+        status: t.status,
+        headerClass: t["header-class"] ?? t.headerClass,
+        headerStyle: t["header-style"] ?? t.headerStyle,
+        // TabContentの#iconスロットは、TabContentではなくここで見出しに描画する
+        icon: a.children?.icon
+      };
+    }, r = y(() => {
+      const a = [];
+      for (const t of b.default?.() ?? []) {
+        const e = Array.isArray(t.children) ? t.children : [t];
+        for (const h of e) {
+          const f = k(h);
+          f && a.push(f);
+        }
+      }
+      return a;
+    }), p = y(() => d.value != null ? d.value : (l.selectFirstEnabled ? r.value.find((t) => !t.disabled) : r.value[0])?.labelId), m = A(!1);
+    E(P, { activeLabelId: p, mounted: m, loadingSlot: () => b.loading }), M(() => {
+      m.value = !0;
+    });
+    const w = (a) => {
+      d.value = a, $("emit:changeSelectedTab", a);
+    };
+    return (a, t) => (s(), i("div", J, [
+      (s(), _(F, {
+        to: l.teleport ?? "body",
+        disabled: l.teleport == null
+      }, [
+        o("div", {
+          class: g(["dwui-tab-headers", l.headerClass]),
+          style: v(l.headerStyle)
+        }, [
+          (s(!0), i(S, null, G(r.value, (e) => (s(), i(S, {
+            key: e.labelId
+          }, [
+            o("input", {
+              id: `${c(n)}-${e.labelId}`,
+              type: "radio",
+              class: "dwui-tab-radio",
+              name: c(n),
+              disabled: e.disabled,
+              checked: e.labelId === p.value,
+              onChange: (h) => w(e.labelId)
+            }, null, 40, Q),
+            o("label", {
+              for: `${c(n)}-${e.labelId}`,
+              class: g(["dwui-tab-item", [e.status != null ? `dwui-tab-${e.status}` : void 0, e.headerClass]]),
+              style: v(e.headerStyle),
+              "data-test-tab-content-control": e.labelId
+            }, [
+              V(K, null, j({
+                default: I(() => [
+                  z(" " + D(e.description), 1)
+                ]),
+                _: 2
+              }, [
+                e.icon != null ? {
+                  name: "icon",
+                  fn: I(() => [
+                    (s(), _(O(e.icon)))
+                  ]),
+                  key: "0"
+                } : void 0
+              ]), 1024)
+            ], 14, R)
+          ], 64))), 128))
+        ], 6)
+      ], 8, ["to", "disabled"])),
+      o("div", U, [
+        H(a.$slots, "default")
+      ])
+    ]));
+  }
+});
+export {
+  Z as _
+};

package/lib/tab-group.vue_vue_type_style_index_0_lang-CwVGYZAo.cjs

@@ -0,0 +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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digitalwalletcorp/vue-core",
-  "version": "0.3.0",
+  "version": "1.0.0",
   "type": "module",
   "description": "Basic UI components for Vue 3",
   "main": "lib/index.cjs",

package/src/components.ts

@@ -1,4 +1,7 @@
 // 公開するコンポーネントをここに列挙する。index/register/nuxtはここから読む
 export { default as AccordionFieldset } from '@/accordion-fieldset.vue';
+export { default as HourglassLoading } from '@/hourglass-loading.vue';
 export { default as LabelButton } from '@/label-button.vue';
 export { default as LabelIcon } from '@/label-icon.vue';
+export { default as TabContent } from '@/tab-content.vue';
+export { default as TabGroup } from '@/tab-group.vue';

package/src/hourglass-loading.vue

@@ -0,0 +1,42 @@
+<!--
+砂時計のローディング。
+loading=true の間は砂時計アイコン(SvgHourglass)を表示し、false になったら slot の内容(空文字でもそのまま)を表示する。
+CSSの :empty に依存しないため「取得成功したが値が空」のケースでも loading が残らない。
+-->
+<template>
+  <SvgHourglass
+    v-if="props.loading"
+    :duration="props.duration"
+    :size="props.size"
+    class="dwui-hourglass-loading"
+  />
+  <slot v-else />
+</template>
+
+<script setup lang="ts">
+import { SvgHourglass } from '@digitalwalletcorp/vue-svg-icons';
+
+interface Props {
+  /** ローディング表示するか */
+  loading: boolean;
+  /** 砂が落ち切るまでの秒数。未指定ならSvgHourglassの既定値に任せる */
+  duration?: number;
+  /** 表示サイズ(高さ)。数値はpxとして扱う */
+  size?: number | string;
+}
+const props = withDefaults(defineProps<Props>(), {
+  size: '1.2em'
+});
+</script>
+
+<style>
+:where(.dwui-hourglass-loading) {
+  animation: dwui-hourglass-loading-spin 1.2s linear infinite;
+}
+
+@keyframes dwui-hourglass-loading-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/src/index.ts

@@ -1,2 +1,3 @@
 export * from '@/components';
 export type { LabelPreset } from '@/types/label-preset';
+export type { TabContentStatus } from '@/internal/tab-group-context';

package/src/internal/tab-group-context.ts

@@ -0,0 +1,19 @@
+import type { ComputedRef, InjectionKey, Ref, Slot } from 'vue';
+
+/** タブの見出しの状態 */
+export type TabContentStatus = 'warn' | 'error';
+
+/**
+ * TabGroupからTabContentへ渡す状態
+ * TabGroupとTabContentの間だけで使い、利用側には公開しない
+ */
+export interface TabGroupContext {
+  /** 選択中のタブのlabelId */
+  activeLabelId: ComputedRef<string | undefined>;
+  /** TabGroupがマウント済みか */
+  mounted: Ref<boolean>;
+  /** TabGroupの#loadingスロット。未指定ならTabContentは既定の読み込み中表示を出す */
+  loadingSlot: () => Slot | undefined;
+}
+
+export const tabGroupContextKey: InjectionKey<TabGroupContext> = Symbol('dwui-tab-group');

package/src/tab-content.vue

@@ -0,0 +1,147 @@
+<!--
+TabGroupの中に置くタブ1つ分の中身
+-->
+<template>
+  <div
+    v-if="!props.disabled"
+    class="dwui-tab-content"
+    :aria-label="props.labelId"
+    :aria-checked="selected ? 'true' : 'false'"
+    :aria-description="props.description"
+    :aria-busy="loading ? 'true' : undefined"
+    :data-test-tab-content="props.labelId"
+  >
+    <slot
+      :activated="activated"
+      :set-loading="setLoading"
+    />
+    <!-- 読み込み中は中身に覆いを重ね、操作できないようにする -->
+    <div
+      v-if="loading"
+      class="dwui-tab-loading"
+    >
+      <component
+        :is="loadingSlot()"
+        v-if="loadingSlot() != null"
+      />
+      <span
+        v-else
+        class="dwui-tab-loading-spinner"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref } from 'vue';
+import type { ClassValue, Slot, StyleValue } from 'vue';
+import { tabGroupContextKey } from '@/internal/tab-group-context';
+import type { TabContentStatus } from '@/internal/tab-group-context';
+
+// labelId・description・header*・status・#iconは、TabGroupが見出しを描画するために読む
+interface Props {
+  /** タブを識別するID。TabGroupのselectedTabLabelIdに渡す値 */
+  labelId: string;
+  /** タブの見出しの文字 */
+  description: string;
+  /** trueの場合、タブを選べなくし、中身も描画しない */
+  disabled?: boolean;
+  /** タブの見出しの状態。見出しの色が変わる */
+  status?: TabContentStatus;
+  /** タブの見出しに付けるclass */
+  headerClass?: ClassValue;
+  /** タブの見出しに付けるstyle */
+  headerStyle?: StyleValue;
+}
+const props = defineProps<Props>();
+
+interface Slots {
+  /** タブの見出しの文字の前に表示するアイコン */
+  icon?(): unknown;
+  /**
+   * タブの中身
+   * activated: タブが選ばれて表示されている間はtrue。中身のコンポーネントにpropsで渡し、選ばれたときの処理の契機にする
+   * setLoading: trueを渡すと読み込み中の表示にする。表示はTabGroupの#loadingスロット、未指定なら既定の表示
+   */
+  default?(props: { activated: boolean; setLoading: (loading: boolean) => void }): unknown;
+}
+defineSlots<Slots>();
+
+const context = inject(tabGroupContextKey, undefined);
+
+const loading = ref(false);
+
+/**
+ * TabGroupの#loadingスロット。見出しの#iconと同じく、スロット関数をそのままコンポーネントとして描画する
+ * スロットはリアクティブではないため、computedでキャッシュせず描画のたびに取り出す
+ *
+ * @returns {Slot | undefined}
+ */
+const loadingSlot = (): Slot | undefined => context?.loadingSlot();
+
+// 表示の切り替えは初期描画から効かせるため、マウントを待たない
+const selected = computed((): boolean => context?.activeLabelId.value === props.labelId);
+
+const activated = computed((): boolean => !!context?.mounted.value && selected.value);
+
+/**
+ * 読み込み中の表示を切り替える
+ *
+ * @param {boolean} value
+ */
+const setLoading = (value: boolean) => {
+  loading.value = value;
+};
+</script>
+
+<style>
+: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;
+  /* 全幅を横断すると速度が出てカクつくため、固定の移動量とease-outとフェードでスライドインする */
+  animation: dwui-tab-slide-in 0.35s cubic-bezier(0.22, 1, 0.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, 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, 0.4));
+  border-top-color: var(--dwui-loading-spinner-color, #ffffff);
+  border-radius: 50%;
+  animation: dwui-tab-loading-spin 0.8s linear infinite;
+}
+
+@keyframes dwui-tab-loading-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes dwui-tab-slide-in {
+  0% {
+    opacity: 0;
+    transform: translateX(-128px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+</style>

package/src/tab-group.vue

@@ -0,0 +1,246 @@
+<!--
+TabContentを並べてタブで切り替える
+-->
+<template>
+  <div class="dwui-tab-group">
+    <!-- SSRではtoが空だとdisabledでも何も出力されないため、移動しない場合も有効なセレクタを渡す -->
+    <Teleport
+      :to="props.teleport ?? 'body'"
+      :disabled="props.teleport == null"
+    >
+      <div
+        class="dwui-tab-headers"
+        :class="props.headerClass"
+        :style="props.headerStyle"
+      >
+        <template
+          v-for="tab in tabs"
+          :key="tab.labelId"
+        >
+          <input
+            :id="`${groupName}-${tab.labelId}`"
+            type="radio"
+            class="dwui-tab-radio"
+            :name="groupName"
+            :disabled="tab.disabled"
+            :checked="tab.labelId === activeLabelId"
+            @change="onChangeTab(tab.labelId)"
+          >
+          <label
+            :for="`${groupName}-${tab.labelId}`"
+            class="dwui-tab-item"
+            :class="[tab.status != null ? `dwui-tab-${tab.status}` : undefined, tab.headerClass]"
+            :style="tab.headerStyle"
+            :data-test-tab-content-control="tab.labelId"
+          >
+            <LabelIcon>
+              <template
+                v-if="tab.icon != null"
+                #icon
+              >
+                <component :is="tab.icon" />
+              </template>
+              {{ tab.description }}
+            </LabelIcon>
+          </label>
+        </template>
+      </div>
+    </Teleport>
+    <div class="dwui-tab-items">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, provide, ref, useId } from 'vue';
+import type { ClassValue, Slot, StyleValue, VNode } from 'vue';
+import LabelIcon from '@/label-icon.vue';
+import TabContent from '@/tab-content.vue';
+import { tabGroupContextKey } from '@/internal/tab-group-context';
+import type { TabContentStatus } from '@/internal/tab-group-context';
+
+interface Props {
+  /** ラジオボタンのname。未指定なら自動で採番する */
+  tabGroupName?: string;
+  /** selectedTabLabelIdが未指定のとき、trueならdisabledでない最初のタブを選ぶ。falseなら先頭のタブ(disabledなら中身は空になる) */
+  selectFirstEnabled?: boolean;
+  /** タブの見出しを並べる部分に付けるclass */
+  headerClass?: ClassValue;
+  /** タブの見出しを並べる部分に付けるstyle */
+  headerStyle?: StyleValue;
+  /** タブの見出しを移動する先(Teleportのto) */
+  teleport?: string;
+}
+const props = defineProps<Props>();
+
+interface Emits {
+  (e: 'emit:changeSelectedTab', labelId: string): void;
+}
+const emit = defineEmits<Emits>();
+
+/**
+ * 選択するタブのlabelId。未指定なら先頭のタブ
+ * 親がいつ代入しても選び直せるよう、v-model:selected-tab-label-idで同期する前提とする
+ */
+const selectedLabelId = defineModel<string>('selectedTabLabelId');
+
+interface Slots {
+  default?(): VNode[];
+  /** 読み込み中のTabContentに重ねて表示する内容。未指定なら既定の読み込み中表示 */
+  loading?(): VNode[];
+}
+const slots = defineSlots<Slots>();
+
+/** タブの見出しの描画に使う、TabContentの指定 */
+interface TabHeader {
+  labelId: string;
+  description: string;
+  disabled: boolean;
+  status?: TabContentStatus;
+  headerClass?: ClassValue;
+  headerStyle?: StyleValue;
+  icon?: Slot;
+}
+
+const groupName = props.tabGroupName ?? useId();
+
+/**
+ * TabContentのVNodeから見出しの指定を取り出す
+ * propsのキーはテンプレートの書き方(label-id / labelId)のまま入っているため、両方を見る
+ *
+ * @param {VNode} vnode
+ * @returns {TabHeader | undefined}
+ */
+const toTabHeader = (vnode: VNode): TabHeader | undefined => {
+  // v-ifで消えたときのコメントなど、TabContent以外のVNodeは除外する
+  if (vnode.type !== TabContent) {
+    return undefined;
+  }
+  const vnodeProps = vnode.props ?? {};
+  const disabled = vnodeProps.disabled;
+  return {
+    labelId: String(vnodeProps['label-id'] ?? vnodeProps.labelId),
+    description: vnodeProps.description,
+    // 属性だけを書いた場合(<TabContent disabled>)は空文字になる
+    disabled: disabled === '' || !!disabled,
+    status: vnodeProps.status,
+    headerClass: vnodeProps['header-class'] ?? vnodeProps.headerClass,
+    headerStyle: vnodeProps['header-style'] ?? vnodeProps.headerStyle,
+    // TabContentの#iconスロットは、TabContentではなくここで見出しに描画する
+    icon: (vnode.children as Record<string, Slot | undefined> | null)?.icon
+  };
+};
+
+const tabs = computed((): TabHeader[] => {
+  const headers: TabHeader[] = [];
+  for (const vnode of slots.default?.() ?? []) {
+    // v-forで並べたTabContentは、Fragmentのchildrenに入る
+    const candidates = Array.isArray(vnode.children) ? vnode.children as VNode[] : [vnode];
+    for (const candidate of candidates) {
+      const header = toTabHeader(candidate);
+      if (header) {
+        headers.push(header);
+      }
+    }
+  }
+  return headers;
+});
+
+// 選ばれるまでは先頭のタブを選択中とする。スロットは描画中に読む必要があるため、setupの時点では先頭を確定しない
+const activeLabelId = computed((): string | undefined => {
+  if (selectedLabelId.value != null) {
+    return selectedLabelId.value;
+  }
+  const first = props.selectFirstEnabled ? tabs.value.find(tab => !tab.disabled) : tabs.value[0];
+  return first?.labelId;
+});
+// タブの中身はactivatedを契機にAPIを呼ぶため、親の画面のonMountedで検索条件が整う前に通知しないよう、マウント後に通知を始める
+const mounted = ref(false);
+provide(tabGroupContextKey, { activeLabelId, mounted, loadingSlot: () => slots.loading });
+
+onMounted(() => {
+  mounted.value = true;
+});
+
+const onChangeTab = (labelId: string) => {
+  selectedLabelId.value = labelId;
+  emit('emit:changeSelectedTab', labelId);
+};
+</script>
+
+<style>
+: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 0.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, 0.35));
+}
+
+:where(.dwui-tab-items) {
+  height: 100%;
+  border: 1px solid var(--dwui-tab-border, #565656);
+  /* 中身を切り替えたときのスライドを枠内に収める */
+  overflow: hidden;
+}
+</style>

package/lib/components-B3xZ0gFq.js

@@ -1,12 +0,0 @@
-import { _ as o } from "./accordion-fieldset.vue_vue_type_style_index_0_lang-Dk5Id0dl.js";
-import { _ as e } from "./label-button.vue_vue_type_script_setup_true_lang-CoHrTUSs.js";
-import { _ as t } from "./label-icon.vue_vue_type_style_index_0_lang-bQFkQ_gC.js";
-const a = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  AccordionFieldset: o,
-  LabelButton: e,
-  LabelIcon: t
-}, Symbol.toStringTag, { value: "Module" }));
-export {
-  a as c
-};

package/lib/components-CrmajA9z.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("./accordion-fieldset.vue_vue_type_style_index_0_lang-Cod0KnrE.cjs"),_=require("./label-button.vue_vue_type_script_setup_true_lang-DqhdCgmJ.cjs"),t=require("./label-icon.vue_vue_type_style_index_0_lang-C2URq6GP.cjs"),n=Object.freeze(Object.defineProperty({__proto__:null,AccordionFieldset:e._sfc_main,LabelButton:_._sfc_main,LabelIcon:t._sfc_main},Symbol.toStringTag,{value:"Module"}));exports.components=n;