@astryx-vue/lab 0.3.0 → 0.3.1

package/dist/index.d.ts

@@ -68,11 +68,11 @@ type __VLS_Slots$4 = {} & {
 };
 declare const __VLS_base$4: import("vue").DefineComponent<CircularProgressProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CircularProgressProps> & Readonly<{}>, {
   value: number;
+  size: CircularProgressSize;
   max: number;
   isLabelHidden: boolean;
   hasValueLabel: boolean;
   formatValueLabel: (value: number, max: number) => string;
-  size: CircularProgressSize;
   variant: keyof CircularProgressVariantMap;
   isIndeterminate: boolean;
   isDisabled: boolean;
@@ -753,9 +753,9 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<StatProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<StatProps> & Readonly<{}>, {
   value: string;
-  size: StatSize;
   delta: StatDelta;
   description: string;
+  size: StatSize;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export$3: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default$7: typeof __VLS_export$3;

package/dist/index.js

@@ -3043,7 +3043,7 @@ function useSheetSearch(options) {
 const _hoisted_1$5 = [
 	"aria-expanded",
 	"aria-label",
-	"disabled"
+	"aria-disabled"
 ];
 const _hoisted_2$5 = {
 	key: 1,
@@ -3065,7 +3065,7 @@ const _hoisted_7$1 = { class: "astryx-mobile-tokenizer__create-label" };
 const _hoisted_8$1 = [
 	"aria-checked",
 	"aria-label",
-	"disabled",
+	"aria-disabled",
 	"onClick"
 ];
 const _hoisted_9$1 = { class: "astryx-mobile-tokenizer__row-label" };
@@ -3179,6 +3179,7 @@ const _sfc_main$5 = /*@__PURE__*/ defineComponent({
 			});
 		}
 		function openSheet() {
+			if (props.isDisabled) return;
 			selectedAtOpen.value = [...selected.value];
 			sheet.resetWindow();
 			isOpen.value = true;
@@ -3200,6 +3201,14 @@ const _sfc_main$5 = /*@__PURE__*/ defineComponent({
 			query.value = "";
 			sheet.resetWindow();
 		}
+		function isRowDisabled(item) {
+			return !selectedIds.value.has(item.id) && isAtMax.value;
+		}
+		function handleRowClick(item) {
+			if (isRowDisabled(item)) return;
+			if (selectedIds.value.has(item.id)) handleRemove(item);
+			else handleAdd(item);
+		}
 		function handleDone() {
 			query.value = "";
 			handleOpenChange(false);
@@ -3223,7 +3232,7 @@ const _sfc_main$5 = /*@__PURE__*/ defineComponent({
 					"aria-haspopup": "dialog",
 					"aria-expanded": isOpen.value,
 					"aria-label": __props.label,
-					disabled: __props.isDisabled,
+					"aria-disabled": __props.isDisabled || void 0,
 					onClick: openSheet
 				}, [selected.value.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(selected.value, (item) => {
 					return openBlock(), createBlock(unref(Token), {
@@ -3293,15 +3302,15 @@ const _sfc_main$5 = /*@__PURE__*/ defineComponent({
 								class: "astryx-mobile-tokenizer__row",
 								"aria-checked": selectedIds.value.has(item.id),
 								"aria-label": item.label,
-								disabled: !selectedIds.value.has(item.id) && isAtMax.value,
-								onClick: ($event) => selectedIds.value.has(item.id) ? handleRemove(item) : handleAdd(item)
+								"aria-disabled": isRowDisabled(item) || void 0,
+								onClick: ($event) => handleRowClick(item)
 							}, [createElementVNode("span", _hoisted_9$1, [createVNode(unref(Text), { type: "body" }, {
 								default: withCtx(() => [createTextVNode(toDisplayString(item.label), 1)]),
 								_: 2
 							}, 1024)]), createVNode(unref(CheckboxIndicator), {
 								state: selectedIds.value.has(item.id) ? "checked" : "unchecked",
 								size: "md",
-								"is-disabled": !selectedIds.value.has(item.id) && isAtMax.value
+								"is-disabled": isRowDisabled(item)
 							}, null, 8, ["state", "is-disabled"])], 8, _hoisted_8$1);
 						}), 128))], 40, _hoisted_5$3),
 						query.value.trim() === "" ? (openBlock(), createElementBlock("div", _hoisted_10$1, [createVNode(unref(Button), {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astryx-vue/lab",
   "type": "module",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Astryx lab components for Vue 3 — experimental components that may change. Ships only under the canary dist-tag.",
   "author": "ShenQingchuan",
   "license": "MIT",
@@ -53,7 +53,7 @@
   ],
   "peerDependencies": {
     "vue": "^3.5.0",
-    "@astryx-vue/core": "^0.7.9"
+    "@astryx-vue/core": "^0.7.11"
   },
   "devDependencies": {
     "@types/node": "26.6.4",
@@ -64,7 +64,7 @@
     "unplugin-vue": "8.0.0",
     "vue": "3.5.43",
     "vue-tsc": "3.3.12",
-    "@astryx-vue/core": "^0.7.9"
+    "@astryx-vue/core": "^0.7.11"
   },
   "scripts": {
     "build": "tsdown",

package/styles/mobile-tokenizer.css

@@ -143,4 +143,18 @@
   .astryx-mobile-tokenizer__empty {
     flex-grow: 1;
   }
+
+  @media (forced-colors: active) {
+    .astryx-mobile-tokenizer__trigger[aria-disabled='true'] {
+      border-color: GrayText;
+      color: GrayText;
+    }
+
+    .astryx-mobile-tokenizer__trigger[aria-disabled='true'] .astryx-mobile-tokenizer__trigger-placeholder,
+    .astryx-mobile-tokenizer__trigger[aria-disabled='true'] .astryx-token,
+    .astryx-mobile-tokenizer__row[aria-disabled='true'],
+    .astryx-mobile-tokenizer__row[aria-disabled='true'] .astryx-text {
+      color: GrayText;
+    }
+  }
 }