@kazee-ds/vue 0.10.2 → 0.11.0

package/README.md

@@ -1,8 +1,8 @@
 # @kazee-ds/vue
 
-Prepared **0.10.2** centers the check and indeterminate dash of composed `Checkbox.Indicator`. Use React **0.10.3** or Vue **0.10.2** with styles **0.11.0**. These versions are unpublished; see [release status](https://gitlab.com/kazee.indonesia/kazee-design-system/-/blob/main/docs/versions.md).
+Prepared **0.11.0** adds the `enclosed` Tabs variant (folder tabs) and keeps a nested Tabs independent of its ancestor's variant. Use React **0.11.0** or Vue **0.11.0** with styles **0.12.0**. These versions are unpublished; see [release status](https://gitlab.com/kazee.indonesia/kazee-design-system/-/blob/main/docs/versions.md).
 
-The prepared styles **0.11.0** bundle tokens **0.7.0**, which add `--ds-color-text-secondary`: a cool-gray secondary text role (`#6b7090` light, `#9ca0ba` dark) that meets WCAG AA on default, raised and sunken surfaces. Published styles **0.10.3** / tokens **0.6.1** introduced `#DBDBDB` light-theme neutral borders, which remain unchanged.
+The prepared styles **0.12.0** bundle tokens **0.8.0**, which add the `cool-gray-300` palette color (`#B0B3C4`), and style the `enclosed` Tabs variant. Tabs root modifiers are scoped with CSS `@scope`, so nested Tabs keep their own variant (Chrome/Edge 118, Safari 17.4, Firefox 146). Published styles **0.11.0** / tokens **0.7.0** added the AA `--ds-color-text-secondary` text role, which remains unchanged.
 Accessible Kazee Vue components, including Toast, built on Reka UI and native controls. Requires Vue 3.4+ and ESM.
 
 Version **0.10.0** adds Combobox sizing, focus/search and nonempty-selection policies, full-control popovers, and compact and compound Dialog header/footer dividers and builds on controlled selectable Card actions, Avatar/AvatarGroup, expanded Badge, sized/icon Switch, interactive/compact Card, dense controls, input clearing and composable date/time families with native Vue models and slots. Existing compact APIs remain supported. Verify registry availability before installing; use matching local packed artifacts for checkout testing. See [component expansion](https://gitlab.com/kazee.indonesia/kazee-design-system/-/blob/main/docs/component-expansion.md) and [release status](https://gitlab.com/kazee.indonesia/kazee-design-system/-/blob/main/docs/versions.md).
@@ -15,7 +15,7 @@ Version 0.5.3 ignores Toast shortcut events with missing or non-string keys. Nor
 After the prepared versions are published and verified, public npm installation requires no read token or login. Until then use matching local packed artifacts. Preserve the application's package manager and lockfile.
 
 ```sh
-npm install --save-exact @kazee-ds/vue@0.10.2 @kazee-ds/styles@0.11.0
+npm install --save-exact @kazee-ds/vue@0.11.0 @kazee-ds/styles@0.12.0
 ```
 
 ## Use

package/dist/index.js

@@ -501,6 +501,13 @@ var SelectValue_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/types.ts
+function tabsVariantClass(variant, orientation) {
+	if (!variant || variant === "default") return "tabs--primary";
+	if (variant === "enclosed" && orientation === "vertical") return "tabs--secondary";
+	return `tabs--${variant}`;
+}
+//#endregion
 //#region src/TabsRoot.vue
 var TabsRoot_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
@@ -541,7 +548,7 @@ var TabsRoot_default = /* @__PURE__ */ defineComponent({
 			}, {
 				class: [
 					"tabs",
-					`tabs--${__props.variant === "default" ? "primary" : __props.variant ?? "primary"}`,
+					unref(tabsVariantClass)(__props.variant, __props.orientation),
 					`tabs--${__props.size ?? "md"}`,
 					`tabs--align-${__props.align ?? "center"}`,
 					__props.fullWidth && "tabs--full-width"
@@ -4935,7 +4942,7 @@ var Tabs_default = /* @__PURE__ */ defineComponent({
 				id: __props.id,
 				class: unref(partClasses)([
 					"tabs",
-					`tabs--${__props.variant === "default" ? "primary" : __props.variant}`,
+					unref(tabsVariantClass)(__props.variant, __props.orientation),
 					`tabs--align-${__props.align}`,
 					__props.fullWidth && "tabs--full-width",
 					__props.inset === "none" && "tabs--flush",