@astryx-vue/core 0.7.8 → 0.7.10

package/styles/complex-selector.css

@@ -55,7 +55,7 @@
   }
 
   @media (hover: hover) {
-    .astryx-complex-selector[data-variant='ghost']:not(:disabled):hover {
+    .astryx-complex-selector[data-variant='ghost']:not(:disabled, [aria-disabled='true']):hover {
       background: var(--astryx-color-overlay-hover, #0000000d);
     }
   }
@@ -82,7 +82,7 @@
   }
 
   @media (hover: hover) {
-    .astryx-complex-selector[data-variant='secondary']:not(:disabled):hover {
+    .astryx-complex-selector[data-variant='secondary']:not(:disabled, [aria-disabled='true']):hover {
       background-image: linear-gradient(var(--astryx-button-secondary-hover-overlay, var(--astryx-button-hover-overlay, #0000000d)), var(--astryx-button-secondary-hover-overlay, var(--astryx-button-hover-overlay, #0000000d)));
     }
   }
@@ -92,7 +92,8 @@
     outline-offset: var(--astryx-focus-outline-offset, 2px);
   }
 
-  .astryx-complex-selector:disabled {
+  .astryx-complex-selector:disabled,
+  .astryx-complex-selector[aria-disabled='true'] {
     opacity: 0.5;
     cursor: default;
   }

package/styles/date-range-input.css

@@ -21,7 +21,16 @@
     cursor: pointer;
   }
 
-  .astryx-date-range-trigger:disabled {
+  .astryx-date-range-input[data-disabled='true'] {
+    transition: none;
+  }
+
+  .astryx-date-range-input[data-disabled='true']:focus-within {
+    border-color: var(--astryx-input-focus, #262626);
+    box-shadow: inset 0 0 0 2px var(--astryx-color-accent-muted, color-mix(in srgb, var(--astryx-input-focus, #262626) 15%, transparent));
+  }
+
+  .astryx-date-range-trigger[aria-disabled='true'] {
     cursor: default;
   }
 
@@ -78,12 +87,12 @@
   }
 
   @media (hover: hover) {
-    .astryx-date-range-preset:hover:not(:disabled) {
+    .astryx-date-range-preset:hover:not([aria-disabled='true']) {
       background: var(--astryx-dropdown-menu-hover-background, light-dark(#0536590c, #ffffff0c));
     }
   }
 
-  .astryx-date-range-preset:disabled {
+  .astryx-date-range-preset[aria-disabled='true'] {
     opacity: 0.4;
     cursor: default;
   }

package/styles/date-time-input.css

@@ -27,6 +27,22 @@
     min-width: 0;
   }
 
+  .astryx-date-time-input .astryx-date-input-wrapper[data-disabled='true'],
+  .astryx-date-time-input .astryx-bordered-control[data-disabled='true'] {
+    transition: none;
+  }
+
+  .astryx-date-time-input .astryx-date-input-wrapper[data-disabled='true']:focus-within,
+  .astryx-date-time-input .astryx-bordered-control[data-disabled='true']:focus-within {
+    border-color: var(--astryx-input-focus, #262626);
+    box-shadow: inset 0 0 0 2px var(--astryx-color-accent-muted, color-mix(in srgb, var(--astryx-input-focus, #262626) 15%, transparent));
+  }
+
+  .astryx-date-time-fields[data-presentation='bottom-sheet']:focus-within .astryx-date-touch-segment:focus-visible {
+    outline: 2px solid var(--astryx-input-focus, #262626);
+    outline-offset: 2px;
+  }
+
   /* Original segments use a 196px basis, so the row wraps below 399px
      even when the placeholders still fit. Measured placeholders are about
      82px; with the icon and padding they stay on one row down to 16rem.

package/styles/selector.css

@@ -371,6 +371,7 @@
   .astryx-selector-option {
     box-sizing: border-box;
     display: flex;
+    min-width: 0;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
@@ -465,6 +466,11 @@
 
   .astryx-selector-option-label {
     display: block;
+    min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   .astryx-selector-option-description {

package/dist/{index-BJ9Wim6J.d.ts → index-BqhgeAT4.d.ts}

@@ -44,8 +44,8 @@ declare const __VLS_base: import("vue").DefineComponent<TokenProps, {}, {}, {},
 }>, {
   size: TokenSize;
   labelHidden: boolean;
-  color: "default" | "blue" | "cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow";
   disabled: boolean;
+  color: "default" | "blue" | "cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow";
   removable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;