@xleddyl/443-components-vue 0.2.2 → 0.3.0

package/dist/nuxt/runtime/layouts/auth.vue.d.ts

@@ -21,9 +21,6 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly results?: (string | number) | undefined;
     readonly placeholder?: string | undefined | undefined;
     readonly bind?: Record<string, unknown> | undefined;
-    readonly type?: string | undefined | undefined;
-    readonly ref?: import("vue").VNodeRef | undefined;
-    readonly target?: string | undefined | undefined;
     readonly class?: import("vue").ClassValue;
     readonly role?: string | undefined | undefined;
     readonly 'aria-label'?: string | undefined | undefined;
@@ -127,6 +124,8 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly id?: string | undefined | undefined;
     readonly lang?: string | undefined | undefined;
     readonly media?: string | undefined | undefined;
+    readonly target?: string | undefined | undefined;
+    readonly type?: string | undefined | undefined;
     readonly tabindex?: (string | number) | undefined;
     readonly href?: string | undefined | undefined;
     readonly 'aria-activedescendant'?: string | undefined | undefined;
@@ -138,7 +137,7 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly 'aria-colindex'?: (string | number) | undefined;
     readonly 'aria-colspan'?: (string | number) | undefined;
     readonly 'aria-controls'?: string | undefined | undefined;
-    readonly 'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    readonly 'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     readonly 'aria-describedby'?: string | undefined | undefined;
     readonly 'aria-details'?: string | undefined | undefined;
     readonly 'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -175,6 +174,7 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly 'aria-valuemin'?: (string | number) | undefined;
     readonly 'aria-valuenow'?: (string | number) | undefined;
     readonly 'aria-valuetext'?: string | undefined | undefined;
+    readonly ref?: import("vue").VNodeRef | undefined;
     readonly ref_for?: boolean | undefined;
     readonly ref_key?: string | undefined;
     readonly accesskey?: string | undefined | undefined;
@@ -239,9 +239,6 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly results?: (string | number) | undefined;
     readonly placeholder?: string | undefined | undefined;
     readonly bind?: Record<string, unknown> | undefined;
-    readonly type?: string | undefined | undefined;
-    readonly ref?: import("vue").VNodeRef | undefined;
-    readonly target?: string | undefined | undefined;
     readonly class?: import("vue").ClassValue;
     readonly role?: string | undefined | undefined;
     readonly 'aria-label'?: string | undefined | undefined;
@@ -345,6 +342,8 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly id?: string | undefined | undefined;
     readonly lang?: string | undefined | undefined;
     readonly media?: string | undefined | undefined;
+    readonly target?: string | undefined | undefined;
+    readonly type?: string | undefined | undefined;
     readonly tabindex?: (string | number) | undefined;
     readonly href?: string | undefined | undefined;
     readonly 'aria-activedescendant'?: string | undefined | undefined;
@@ -356,7 +355,7 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly 'aria-colindex'?: (string | number) | undefined;
     readonly 'aria-colspan'?: (string | number) | undefined;
     readonly 'aria-controls'?: string | undefined | undefined;
-    readonly 'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    readonly 'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     readonly 'aria-describedby'?: string | undefined | undefined;
     readonly 'aria-details'?: string | undefined | undefined;
     readonly 'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -393,6 +392,7 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly 'aria-valuemin'?: (string | number) | undefined;
     readonly 'aria-valuenow'?: (string | number) | undefined;
     readonly 'aria-valuetext'?: string | undefined | undefined;
+    readonly ref?: import("vue").VNodeRef | undefined;
     readonly ref_for?: boolean | undefined;
     readonly ref_key?: string | undefined;
     readonly accesskey?: string | undefined | undefined;

package/dist/nuxt/runtime/layouts/dashboard.vue.d.ts

@@ -21,9 +21,6 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly results?: (string | number) | undefined;
     readonly placeholder?: string | undefined | undefined;
     readonly bind?: Record<string, unknown> | undefined;
-    readonly type?: string | undefined | undefined;
-    readonly ref?: import("vue").VNodeRef | undefined;
-    readonly target?: string | undefined | undefined;
     readonly class?: import("vue").ClassValue;
     readonly role?: string | undefined | undefined;
     readonly 'aria-label'?: string | undefined | undefined;
@@ -127,6 +124,8 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly id?: string | undefined | undefined;
     readonly lang?: string | undefined | undefined;
     readonly media?: string | undefined | undefined;
+    readonly target?: string | undefined | undefined;
+    readonly type?: string | undefined | undefined;
     readonly tabindex?: (string | number) | undefined;
     readonly href?: string | undefined | undefined;
     readonly 'aria-activedescendant'?: string | undefined | undefined;
@@ -138,7 +137,7 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly 'aria-colindex'?: (string | number) | undefined;
     readonly 'aria-colspan'?: (string | number) | undefined;
     readonly 'aria-controls'?: string | undefined | undefined;
-    readonly 'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    readonly 'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     readonly 'aria-describedby'?: string | undefined | undefined;
     readonly 'aria-details'?: string | undefined | undefined;
     readonly 'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -175,6 +174,7 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly 'aria-valuemin'?: (string | number) | undefined;
     readonly 'aria-valuenow'?: (string | number) | undefined;
     readonly 'aria-valuetext'?: string | undefined | undefined;
+    readonly ref?: import("vue").VNodeRef | undefined;
     readonly ref_for?: boolean | undefined;
     readonly ref_key?: string | undefined;
     readonly accesskey?: string | undefined | undefined;
@@ -239,9 +239,6 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly results?: (string | number) | undefined;
     readonly placeholder?: string | undefined | undefined;
     readonly bind?: Record<string, unknown> | undefined;
-    readonly type?: string | undefined | undefined;
-    readonly ref?: import("vue").VNodeRef | undefined;
-    readonly target?: string | undefined | undefined;
     readonly class?: import("vue").ClassValue;
     readonly role?: string | undefined | undefined;
     readonly 'aria-label'?: string | undefined | undefined;
@@ -345,6 +342,8 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly id?: string | undefined | undefined;
     readonly lang?: string | undefined | undefined;
     readonly media?: string | undefined | undefined;
+    readonly target?: string | undefined | undefined;
+    readonly type?: string | undefined | undefined;
     readonly tabindex?: (string | number) | undefined;
     readonly href?: string | undefined | undefined;
     readonly 'aria-activedescendant'?: string | undefined | undefined;
@@ -356,7 +355,7 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly 'aria-colindex'?: (string | number) | undefined;
     readonly 'aria-colspan'?: (string | number) | undefined;
     readonly 'aria-controls'?: string | undefined | undefined;
-    readonly 'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    readonly 'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     readonly 'aria-describedby'?: string | undefined | undefined;
     readonly 'aria-details'?: string | undefined | undefined;
     readonly 'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -393,6 +392,7 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly 'aria-valuemin'?: (string | number) | undefined;
     readonly 'aria-valuenow'?: (string | number) | undefined;
     readonly 'aria-valuetext'?: string | undefined | undefined;
+    readonly ref?: import("vue").VNodeRef | undefined;
     readonly ref_for?: boolean | undefined;
     readonly ref_key?: string | undefined;
     readonly accesskey?: string | undefined | undefined;

package/dist/styles/base.css

@@ -10,11 +10,13 @@
 }
 
 html.k-root {
+   font-size: 100%;
    background: var(--k-canvas);
 }
 
 html.k-root > body {
    margin: 0;
+   font-size: var(--k-font-size);
 }
 
 :where(.k-root, .k-root *, .k-root *::before, .k-root *::after) {
@@ -26,6 +28,11 @@ html.k-root > body {
    color: var(--k-text);
 }
 
+:where(.k-root) :where(a) {
+   color: inherit;
+   text-decoration: inherit;
+}
+
 :where(.k-root) :where(button, input, select, textarea, optgroup) {
    font: inherit;
    font-feature-settings: inherit;

package/dist/styles/core/field-message.css

@@ -0,0 +1,34 @@
+.k-field-message,
+.k-form-field-error,
+.k-form-field-warning {
+   --k-icon-size: 0.875rem;
+   --k-field-message-tone: var(--k-danger);
+   display: flex;
+   align-items: flex-start;
+   gap: 0.375rem;
+   font-size: 0.8125rem;
+   line-height: 1.35;
+   color: var(--k-field-message-tone);
+   animation: k-enter var(--k-duration-lg) var(--k-ease-out) backwards;
+}
+
+.k-field-message-warning,
+.k-form-field-warning {
+   --k-field-message-tone: var(--k-warning);
+}
+
+.k-field-message-neutral {
+   --k-field-message-tone: var(--k-text-muted);
+}
+
+.k-field-message > .k-icon,
+.k-form-field-error > .k-icon,
+.k-form-field-warning > .k-icon {
+   flex: none;
+   margin-top: 0.0625rem;
+}
+
+.k-field-message-text {
+   min-width: 0;
+   overflow-wrap: anywhere;
+}

package/dist/styles/core/form-field.css

@@ -50,29 +50,6 @@
    color: var(--k-text-muted);
 }
 
-.k-form-field-error,
-.k-form-field-warning {
-   display: flex;
-   align-items: flex-start;
-   gap: 0.375rem;
-   font-size: 0.8125rem;
-   line-height: 1.35;
-   animation: k-enter var(--k-duration-lg) var(--k-ease-out) backwards;
-}
-
-.k-form-field-error > .k-icon,
-.k-form-field-warning > .k-icon {
-   margin-top: 0.0625rem;
-}
-
-.k-form-field-error {
-   color: var(--k-danger);
-}
-
-.k-form-field-warning {
-   color: var(--k-warning);
-}
-
 .k-form-field.is-shaking :is(.k-field, .k-input, [data-k-shake]) {
    animation: k-shake 320ms var(--k-ease);
 }

package/dist/styles/core/form.css

@@ -8,3 +8,14 @@
 .k-form[aria-busy='true'] {
    cursor: progress;
 }
+
+.k-form-alerts {
+   display: flex;
+   flex-direction: column;
+   gap: 0.5rem;
+   border-radius: var(--k-radius-md);
+}
+
+.k-form-alerts:focus {
+   outline: none;
+}

package/dist/styles/core/kbd.css

@@ -6,7 +6,7 @@
    height: 1.25rem;
    padding: 0 0.3125rem;
    font-family: var(--k-font-mono);
-   font-size: 0.6875rem;
+   font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    color: var(--k-text-muted);
@@ -21,5 +21,5 @@
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.25rem;
-   font-size: 0.625rem;
+   font-size: 0.75rem;
 }

package/dist/styles/core/spinner.css

@@ -28,3 +28,22 @@
    --k-spinner-size: 1.75rem;
    --k-spinner-width: 2.5px;
 }
+
+.k-spinner-block {
+   display: flex;
+   flex: 1;
+   flex-direction: column;
+   align-items: center;
+   justify-content: center;
+   gap: 0.75rem;
+   width: 100%;
+   min-height: 10rem;
+   padding: 1.5rem;
+   font-size: 0.8125rem;
+   color: var(--k-text-muted);
+   text-align: center;
+}
+
+.k-spinner-label {
+   animation: k-fade 300ms var(--k-ease) 120ms backwards;
+}

package/dist/styles/core.css

@@ -4,6 +4,7 @@
 @import './core/button.css';
 @import './core/input.css';
 @import './core/textarea.css';
+@import './core/field-message.css';
 @import './core/form-field.css';
 @import './core/form.css';
 @import './core/kbd.css';

package/dist/styles/data/badge.css

@@ -27,7 +27,7 @@
    gap: 0.25rem;
    height: 1.125rem;
    padding: 0 0.375rem;
-   font-size: 0.6875rem;
+   font-size: 0.75rem;
 }
 
 .k-badge-accent {

package/dist/styles/data/filter-pills.css

@@ -36,7 +36,7 @@
    scale: 0.97;
 }
 
-.k-filter-pill[aria-pressed='true'] {
+.k-filter-pill:is([aria-pressed='true'], .is-active) {
    border-style: solid;
    border-color: var(--k-accent-line);
    background: var(--k-accent-soft);
@@ -79,18 +79,19 @@
    padding: 0.125rem 0.3125rem;
    border-radius: var(--k-radius-full);
    background: var(--k-fill);
-   font-size: 0.6875rem;
+   font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: center;
    color: var(--k-text-muted);
 }
 
-.k-filter-pill[aria-pressed='true'] .k-filter-pill-count {
+.k-filter-pill:is([aria-pressed='true'], .is-active) .k-filter-pill-count {
    background: color-mix(in oklab, var(--k-accent) 16%, transparent);
    color: var(--k-accent-text);
 }
 
+.k-filter-pill-sm,
 .k-filter-pills-sm .k-filter-pill {
    height: var(--k-size-xs);
    padding: 0 0.5625rem;
@@ -100,3 +101,39 @@
 .k-filter-pills-clear {
    margin-left: 0.25rem;
 }
+
+.k-filter-pill[aria-expanded='true'] {
+   border-style: solid;
+   background: var(--k-hover);
+   color: var(--k-text);
+}
+
+.k-filter-pill.is-active[aria-expanded='true'] {
+   background: color-mix(in oklab, var(--k-accent) 18%, transparent);
+   color: var(--k-accent-text);
+}
+
+.k-filter-pill-value {
+   padding-left: 0.3125rem;
+   border-left: 1px solid currentColor;
+   border-left-color: color-mix(in oklab, currentColor 30%, transparent);
+   font-weight: 600;
+   overflow: hidden;
+   text-overflow: ellipsis;
+   max-width: 14rem;
+}
+
+.k-filter-pill-caret {
+   --k-icon-size: 0.75rem;
+   margin-right: -0.125rem;
+   color: var(--k-text-dimmed);
+   transition: transform var(--k-duration-lg) var(--k-ease-out);
+}
+
+.k-filter-pill.is-active .k-filter-pill-caret {
+   color: inherit;
+}
+
+.k-filter-pill[aria-expanded='true'] .k-filter-pill-caret {
+   transform: rotate(180deg);
+}

package/dist/styles/data/selection-bar.css

@@ -0,0 +1,85 @@
+.k-selection-bar {
+   display: flex;
+   min-width: 0;
+}
+
+.k-selection-bar-sticky {
+   position: sticky;
+   top: 0;
+   z-index: 15;
+}
+
+.k-selection-bar-floating {
+   position: sticky;
+   bottom: 1rem;
+   z-index: 15;
+   justify-content: center;
+   pointer-events: none;
+}
+
+.k-selection-bar-panel {
+   display: flex;
+   flex: 1;
+   flex-wrap: wrap;
+   align-items: center;
+   gap: 0.375rem 0.5rem;
+   min-width: 0;
+   min-height: var(--k-size-sm);
+   animation: k-pop 200ms var(--k-ease-out);
+}
+
+.k-selection-bar-sticky .k-selection-bar-panel {
+   padding: 0.375rem 0.375rem 0.375rem 0.75rem;
+   border: 1px solid var(--k-accent-line);
+   border-radius: var(--k-radius-md);
+   background: color-mix(in oklab, var(--k-accent-soft) 60%, var(--k-surface));
+   box-shadow: var(--k-shadow-sm);
+}
+
+.k-selection-bar-floating .k-selection-bar-panel {
+   flex: 0 1 auto;
+   width: min(100%, 40rem);
+   padding: 0.5rem 0.5rem 0.5rem 0.875rem;
+   border-radius: var(--k-radius-lg);
+   background: var(--k-elevated);
+   box-shadow: var(--k-shadow-overlay);
+   pointer-events: auto;
+   animation: k-rise 320ms var(--k-ease-out) both;
+}
+
+.k-selection-bar-count {
+   display: inline-flex;
+   align-items: center;
+   gap: 0.5rem;
+   font-size: 0.8125rem;
+   font-weight: 600;
+   font-variant-numeric: tabular-nums;
+   white-space: nowrap;
+   color: var(--k-text);
+}
+
+.k-selection-bar-dot {
+   width: 0.5rem;
+   height: 0.5rem;
+   flex: none;
+   border-radius: var(--k-radius-full);
+   background: var(--k-accent);
+   box-shadow: 0 0 0 3px var(--k-accent-soft);
+}
+
+.k-selection-bar-actions {
+   display: flex;
+   flex-wrap: wrap;
+   align-items: center;
+   gap: 0.375rem;
+   margin-left: auto;
+}
+
+.k-selection-bar-clear {
+   flex: none;
+   margin-left: auto;
+}
+
+.k-selection-bar-actions + .k-selection-bar-clear {
+   margin-left: 0;
+}

package/dist/styles/data/tree.css

@@ -108,7 +108,7 @@
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--k-font-mono);
-   font-size: 0.71875rem;
+   font-size: 0.75rem;
    color: var(--k-text-dimmed);
 }
 
@@ -117,3 +117,158 @@
    font-size: 0.75rem;
    color: var(--k-text-dimmed);
 }
+
+.k-tree.is-invalid.is-bordered {
+   border-color: var(--k-danger);
+}
+
+.k-tree.is-disabled {
+   opacity: 0.6;
+}
+
+.k-tree-check {
+   --k-icon-size: 0.875rem;
+   display: grid;
+   place-items: center;
+   width: 1rem;
+   flex: none;
+   color: var(--k-accent-text);
+}
+
+.k-tree-check > .k-icon {
+   stroke-width: 2.25;
+   animation: k-icon-pop 300ms var(--k-ease-spring);
+}
+
+.k-tree-empty {
+   padding: 0.75rem 1rem;
+   font-size: 0.8125rem;
+   color: var(--k-text-dimmed);
+}
+
+.k-tree-handle {
+   display: grid;
+   place-items: center;
+   width: 1rem;
+   height: 1.5rem;
+   flex: none;
+   margin-right: -0.25rem;
+   border-radius: var(--k-radius-xs);
+   color: var(--k-text-dimmed);
+   cursor: grab;
+   opacity: 0.6;
+   transition:
+      opacity var(--k-duration) var(--k-ease),
+      color var(--k-duration) var(--k-ease),
+      background-color var(--k-duration) var(--k-ease);
+}
+
+.k-tree-handle > svg {
+   width: 0.875rem;
+   height: 0.875rem;
+}
+
+.k-tree-row:is(:hover, :focus-visible) > .k-tree-handle:not(.is-disabled) {
+   opacity: 1;
+}
+
+.k-tree-handle:hover:not(.is-disabled) {
+   background: var(--k-hover);
+   color: var(--k-text);
+}
+
+.k-tree-handle:active {
+   cursor: grabbing;
+}
+
+.k-tree-handle.is-disabled {
+   opacity: 0.25;
+   cursor: not-allowed;
+}
+
+.k-tree-row.is-moving {
+   opacity: 0.45;
+}
+
+.k-tree-row[data-drop='before'] {
+   box-shadow: inset 0 2px 0 var(--k-accent);
+}
+
+.k-tree-row[data-drop='after'] {
+   box-shadow: inset 0 -2px 0 var(--k-accent);
+}
+
+.k-tree-row[data-drop='inside'] {
+   background: var(--k-accent-soft);
+   box-shadow: inset 0 0 0 1px var(--k-accent-line);
+}
+
+.k-tree-sm {
+   gap: 1px;
+}
+
+.k-tree-sm:not(.is-bordered) {
+   overflow: visible;
+   background: transparent;
+}
+
+.k-tree-sm.is-bordered {
+   padding: 0.25rem;
+   border-radius: var(--k-radius-md);
+}
+
+.k-tree-sm .k-tree-row {
+   gap: 0.375rem;
+   min-height: 1.875rem;
+   padding: 0.25rem 0.5rem 0.25rem calc(0.25rem + var(--k-tree-level, 0) * 1rem);
+   border-radius: var(--k-radius-sm);
+   color: var(--k-text-toned);
+   cursor: pointer;
+}
+
+.k-tree-sm .k-tree-row + .k-tree-row {
+   border-top: 0;
+}
+
+.k-tree-sm .k-tree-row:hover:not([aria-disabled='true']) {
+   background: var(--k-hover);
+}
+
+.k-tree-sm .k-tree-row[aria-selected='true'] {
+   background: var(--k-accent-soft);
+}
+
+.k-tree-sm .k-tree-row[aria-disabled='true'] {
+   opacity: 0.4;
+}
+
+.k-tree-sm .k-tree-toggle {
+   width: 1rem;
+   height: 1rem;
+}
+
+.k-tree-sm .k-tree-icon {
+   --k-icon-size: 1rem;
+   width: auto;
+   height: auto;
+   background: none;
+   box-shadow: none;
+   color: inherit;
+}
+
+.k-tree-sm .k-tree-label {
+   font-weight: 450;
+   color: inherit;
+}
+
+.k-tree-sm .k-tree-row[aria-selected='true'] :is(.k-tree-label, .k-tree-icon) {
+   color: var(--k-accent-text);
+}
+
+.k-tree-sm .k-tree-empty {
+   padding: 0.375rem 0.5rem;
+}
+
+.k-tree-sm .k-tree-row[data-drop='inside'] {
+   background: var(--k-accent-soft);
+}

package/dist/styles/data.css

@@ -8,3 +8,4 @@
 @import './data/timeline.css';
 @import './data/tree.css';
 @import './data/filter-pills.css';
+@import './data/selection-bar.css';

package/dist/styles/forms/calendar.css

@@ -31,7 +31,7 @@
    width: var(--k-calendar-cell);
    height: 1.5rem;
    padding: 0;
-   font-size: 0.6875rem;
+   font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    color: var(--k-text-dimmed);

package/dist/styles/forms/file-input.css

@@ -191,3 +191,11 @@
    color: var(--k-text-muted);
    font-variant-numeric: tabular-nums;
 }
+
+.k-file-input.is-loading .k-file-input-dropzone {
+   cursor: progress;
+}
+
+.k-file-input.is-loading .k-file-input-dropzone-icon {
+   color: var(--k-accent-text);
+}

package/dist/styles/forms/segmented.css

@@ -137,3 +137,11 @@
 .k-segmented.is-disabled {
    opacity: 0.6;
 }
+
+.k-segmented-item.is-muted:not([aria-checked='true']) {
+   color: var(--k-text-dimmed);
+}
+
+.k-segmented-item.is-muted:not([aria-checked='true']) > .k-icon {
+   opacity: 0.7;
+}

package/dist/styles/forms/select.css

@@ -152,7 +152,7 @@
 
    .k-select .k-select-field optgroup {
       padding-top: 0.25rem;
-      font-size: 0.6875rem;
+      font-size: 0.75rem;
       font-weight: 600;
       color: var(--k-text-dimmed);
       background: transparent;