@chayns-ui/core 0.3.2 → 0.4.1

package/dist/list.css

@@ -1,6 +1,5 @@
 @layer chayns.components {
   .chayns-list {
-    box-sizing: border-box;
     display: flex;
     flex-direction: column;
     margin: 0;
@@ -9,7 +8,6 @@
   }
 
   .chayns-list-item {
-    position: relative;
     display: flex;
     align-items: stretch;
     border-radius: 10px;
@@ -17,90 +15,83 @@
 
   .chayns-list-item__action {
     box-sizing: border-box;
-    flex: 1;
-    min-inline-size: 0;
     display: flex;
+    flex: 1;
     align-items: center;
     gap: var(--k12);
+    min-inline-size: 0;
     margin: 0;
     padding: var(--k10) var(--k16);
     border: 0;
     border-radius: 10px;
     background: transparent;
+    color: var(--text);
+    cursor: pointer;
     font: inherit;
     font-size: var(--fs-body);
-    color: var(--text);
     text-align: start;
     text-decoration: none;
-  }
-
-  .chayns-list-item__action--interactive {
-    cursor: pointer;
     transition: background 0.16s ease;
   }
 
-  .chayns-list-item__action--interactive:disabled {
-    cursor: not-allowed;
+  .chayns-list-item__action:disabled {
     color: var(--disabled-fg);
+    cursor: not-allowed;
   }
 
-  .chayns-list-item__action--interactive:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 var(--focus-ring-size)
-      rgb(var(--focus-ring-rgb), var(--focus-ring-alpha-strong));
+  .chayns-list-item__action:focus-visible {
+    outline: var(--focus-ring-size) solid rgb(var(--focus-ring-rgb), var(--focus-ring-alpha-strong));
+    outline-offset: -2px;
   }
 
   .chayns-list-item__leading {
-    flex: none;
     display: flex;
+    flex: none;
     align-items: center;
   }
 
   .chayns-list-item__body {
-    min-inline-size: 0;
-    flex: 1;
     display: flex;
+    flex: 1;
     flex-direction: column;
+    min-inline-size: 0;
   }
 
   .chayns-list-item__title {
-    min-inline-size: 0;
     overflow: hidden;
     color: var(--text);
-    white-space: nowrap;
     text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
-  .chayns-list-item__subtitle {
-    min-inline-size: 0;
+  .chayns-list-item__description {
     overflow: hidden;
-    font-size: var(--fs-meta);
     color: var(--text-3);
-    white-space: nowrap;
+    font-size: var(--fs-meta);
     text-overflow: ellipsis;
-  }
-
-  .chayns-list-item__unread {
-    flex: none;
-    inline-size: var(--k8);
-    block-size: var(--k8);
-    border-radius: 50%;
-    background: var(--accent);
+    white-space: nowrap;
   }
 
   .chayns-list-item__trailing {
-    flex: none;
-    align-self: flex-start;
     display: flex;
+    flex: none;
     align-items: flex-start;
-    justify-content: flex-end;
     gap: var(--k8);
-    padding-block-start: var(--k10);
-    padding-inline-end: var(--k16);
+    padding: var(--k10) var(--k16) 0 0;
     color: var(--text-3);
     font-size: var(--fs-meta);
-    text-align: end;
-    white-space: nowrap;
+  }
+
+  .chayns-list-item__status {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .chayns-list-item__status-dot {
+    inline-size: var(--k8);
+    block-size: var(--k8);
+    border-radius: 50%;
+    background: var(--accent);
   }
 
   .chayns-visually-hidden {
@@ -108,25 +99,23 @@
     inline-size: 1px;
     block-size: 1px;
     margin: -1px;
-    padding: 0;
     overflow: hidden;
     clip-path: inset(50%);
     white-space: nowrap;
-    border: 0;
   }
 
   @media (hover: hover) {
-    .chayns-list-item:has(.chayns-list-item__action--interactive:hover:not(:disabled)) {
+    .chayns-list-item:has(.chayns-list-item__action:hover:not(:disabled)) {
       background: var(--hover);
     }
 
-    .chayns-list-item__action--interactive:hover:not(:disabled) {
+    .chayns-list-item__action:hover:not(:disabled) {
       background: transparent;
     }
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .chayns-list-item__action--interactive {
+    .chayns-list-item__action {
       transition: none;
     }
   }

package/dist/message-box.css

@@ -0,0 +1,26 @@
+@layer chayns.components {
+  .chayns-message-box {
+    box-sizing: border-box;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--k12);
+    inline-size: 100%;
+    padding: var(--k16);
+    border: 1px solid var(--input-border);
+    border-radius: 12px;
+  }
+
+  .chayns-message-box--neutral {
+    background: var(--surface-2);
+  }
+
+  .chayns-message-box--admin {
+    border-color: var(--accent-300);
+    background: var(--tint);
+  }
+
+  .chayns-message-box--warning {
+    border-color: var(--warning);
+    background: var(--warning-bg);
+  }
+}

package/dist/radio-group.css

@@ -0,0 +1,102 @@
+@layer chayns.components {
+  .chayns-radio-group {
+    display: grid;
+    gap: var(--k12);
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+
+  .chayns-radio-group__legend {
+    padding: 0;
+    color: var(--text);
+    font-size: var(--fs-body);
+    font-weight: 600;
+    line-height: 1.4;
+  }
+
+  .chayns-radio-group__options {
+    display: grid;
+    gap: var(--k12);
+  }
+
+  .chayns-radio {
+    display: inline-flex;
+    align-items: flex-start;
+    gap: var(--k12);
+    color: var(--text);
+    cursor: pointer;
+  }
+
+  .chayns-radio__input {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  .chayns-radio__control {
+    box-sizing: border-box;
+    display: inline-grid;
+    inline-size: var(--k20);
+    block-size: var(--k20);
+    flex: none;
+    place-items: center;
+    margin-block-start: 1px;
+    border: 2px solid var(--input-border);
+    border-radius: 50%;
+  }
+
+  .chayns-radio__control::after {
+    inline-size: var(--k8);
+    block-size: var(--k8);
+    border-radius: 50%;
+    background: var(--accent);
+    content: '';
+    opacity: 0;
+    transform: scale(0.6);
+    transition:
+      opacity 0.12s ease,
+      transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
+  }
+
+  .chayns-radio__input:checked + .chayns-radio__control {
+    border-color: var(--accent);
+  }
+
+  .chayns-radio__input:checked + .chayns-radio__control::after {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  .chayns-radio__input:focus-visible + .chayns-radio__control {
+    outline: var(--focus-ring-size) solid rgb(var(--focus-ring-rgb), var(--focus-ring-alpha-strong));
+    outline-offset: 2px;
+  }
+
+  .chayns-radio:has(.chayns-radio__input:disabled) {
+    color: var(--disabled-fg);
+    cursor: not-allowed;
+  }
+
+  .chayns-radio__input:disabled + .chayns-radio__control {
+    border-color: var(--disabled-border);
+    background: var(--disabled-bg);
+  }
+
+  .chayns-radio__label {
+    font-size: var(--fs-body);
+    font-weight: 500;
+    line-height: 1.4;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .chayns-radio__control::after {
+      transition: none;
+    }
+  }
+}

package/dist/segmented-control.css

@@ -0,0 +1,79 @@
+@layer chayns.components {
+  .chayns-segmented-control {
+    display: grid;
+    gap: var(--k8);
+    min-inline-size: 0;
+  }
+
+  .chayns-segmented-control__label {
+    color: var(--text);
+    font-size: var(--fs-body);
+    font-weight: 600;
+    line-height: 1.4;
+  }
+
+  .chayns-segmented-control__segments {
+    position: relative;
+    display: inline-grid;
+    grid-auto-columns: minmax(0, 1fr);
+    grid-auto-flow: column;
+    gap: var(--k4);
+    padding: var(--k4);
+    border-radius: 12px;
+    background: var(--toggle-bg);
+  }
+
+  .chayns-segmented-control__indicator {
+    position: absolute;
+    z-index: 0;
+    inset-block: var(--k4);
+    inset-inline-start: var(--k4);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: var(--surface);
+    box-shadow: var(--shadow-card);
+    pointer-events: none;
+    transition: transform 0.2s ease;
+  }
+
+  .chayns-segmented-control__segment {
+    min-block-size: var(--ctrl-h);
+    position: relative;
+    z-index: 1;
+    min-inline-size: 0;
+    padding: calc(9 * var(--u)) var(--k12);
+    border: 0;
+    border-radius: 8px;
+    background: transparent;
+    color: var(--text);
+    cursor: pointer;
+    font: inherit;
+    font-weight: 500;
+    line-height: 1.4;
+    text-align: center;
+  }
+
+  .chayns-segmented-control__segment:focus-visible {
+    outline: var(--focus-ring-size) solid rgb(var(--focus-ring-rgb), var(--focus-ring-alpha-strong));
+    outline-offset: 2px;
+  }
+
+  .chayns-segmented-control__segment:disabled {
+    color: var(--disabled-fg);
+    cursor: not-allowed;
+  }
+
+  .chayns-segmented-control__segment:hover:not(:disabled) {
+    background: var(--hover);
+  }
+
+  .chayns-segmented-control__segment--selected:hover:not(:disabled) {
+    background: transparent;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .chayns-segmented-control__indicator {
+      transition: none;
+    }
+  }
+}

package/dist/styles.css

@@ -5,3 +5,10 @@
 @import url('./accordion.css');
 @import url('./popup.css');
 @import url('./split-button.css');
+@import url('./text-field.css');
+@import url('./text-area.css');
+@import url('./checkbox.css');
+@import url('./switch.css');
+@import url('./radio-group.css');
+@import url('./segmented-control.css');
+@import url('./message-box.css');

package/dist/switch.css

@@ -0,0 +1,76 @@
+@layer chayns.components {
+  .chayns-switch {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--k14);
+    margin: 0;
+    color: var(--text);
+    cursor: pointer;
+  }
+
+  .chayns-switch__input {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  .chayns-switch__label {
+    font-size: var(--fs-body);
+    font-weight: 500;
+    line-height: 1.4;
+  }
+
+  .chayns-switch__control {
+    box-sizing: border-box;
+    display: flex;
+    inline-size: 42px;
+    block-size: 24px;
+    flex: none;
+    padding: var(--k3);
+    border-radius: 999px;
+    background: var(--input-border);
+  }
+
+  .chayns-switch__knob {
+    inline-size: var(--k18);
+    block-size: var(--k18);
+    border-radius: 50%;
+    background: var(--surface);
+    box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
+    transform: translateX(0);
+    transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
+  }
+
+  .chayns-switch__input:checked + .chayns-switch__control {
+    background: var(--accent);
+  }
+
+  .chayns-switch__input:checked + .chayns-switch__control .chayns-switch__knob {
+    transform: translateX(18px);
+  }
+
+  .chayns-switch__input:focus-visible + .chayns-switch__control {
+    outline: var(--focus-ring-size) solid rgb(var(--focus-ring-rgb), var(--focus-ring-alpha-strong));
+    outline-offset: 2px;
+  }
+
+  .chayns-switch:has(.chayns-switch__input:disabled) {
+    color: var(--disabled-fg);
+    cursor: not-allowed;
+  }
+
+  .chayns-switch__input:disabled + .chayns-switch__control {
+    background: var(--disabled-bg);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .chayns-switch__knob {
+      transition: none;
+    }
+  }
+}

package/dist/text-area.css

@@ -0,0 +1,136 @@
+@layer chayns.components {
+  .chayns-text-area {
+    position: relative;
+    inline-size: 100%;
+  }
+
+  .chayns-text-area__input {
+    box-sizing: border-box;
+    display: block;
+    inline-size: 100%;
+    min-block-size: 84px;
+    padding: var(--input-py) var(--input-px);
+    border: 1.5px solid var(--input-border);
+    border-radius: 10px;
+    resize: vertical;
+    font: inherit;
+    font-size: var(--fs-body);
+    line-height: 1.2;
+    color: var(--text);
+    background: var(--surface);
+    outline: none;
+    transition:
+      border-color 0.18s ease,
+      box-shadow 0.18s ease;
+  }
+
+  .chayns-text-area__label {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 10px;
+    padding-inline: var(--k5);
+    color: var(--text-3);
+    pointer-events: none;
+    font-size: var(--fs-body);
+    font-weight: 400;
+    line-height: 1.2;
+    white-space: nowrap;
+    background: var(--surface);
+    transform: translateY(calc(var(--input-py) + 1.5px + 0.6em - 50%));
+    transform-origin: left center;
+    transition:
+      transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
+      color 0.15s ease;
+  }
+
+  :where(.chayns-text-area__input:hover:not(:disabled)) {
+    border-color: var(--text-3);
+  }
+
+  .chayns-text-area__input:focus {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 var(--focus-ring-size)
+      rgb(var(--focus-ring-rgb), var(--focus-ring-alpha-soft));
+  }
+
+  .chayns-text-area__input:disabled {
+    color: var(--disabled-fg);
+    cursor: not-allowed;
+    background: var(--disabled-bg);
+    border-color: var(--disabled-border);
+  }
+
+  .chayns-text-area__input:read-only {
+    color: var(--text-2);
+    cursor: text;
+    background: var(--surface-2);
+  }
+
+  .chayns-text-area--error .chayns-text-area__label {
+    color: var(--danger);
+  }
+
+  .chayns-text-area__input:disabled + .chayns-text-area__label {
+    color: var(--disabled-fg);
+    background: var(--disabled-bg);
+  }
+
+  .chayns-text-area__input:read-only + .chayns-text-area__label {
+    background: var(--surface-2);
+  }
+
+  .chayns-text-area--error .chayns-text-area__input {
+    border-color: var(--danger);
+  }
+
+  .chayns-text-area__input:focus + .chayns-text-area__label,
+  .chayns-text-area__input:not(:placeholder-shown) + .chayns-text-area__label {
+    transform: translateY(-50%) scale(0.8);
+  }
+
+  .chayns-text-area__input:focus + .chayns-text-area__label {
+    color: var(--accent);
+  }
+
+  .chayns-text-area--error .chayns-text-area__input:focus + .chayns-text-area__label {
+    color: var(--danger);
+  }
+
+  .chayns-text-area--error .chayns-text-area__input:disabled {
+    color: var(--disabled-fg);
+    background: var(--disabled-bg);
+    border-color: var(--disabled-border);
+  }
+
+  .chayns-text-area--error .chayns-text-area__input:disabled + .chayns-text-area__label {
+    color: var(--disabled-fg);
+    background: var(--disabled-bg);
+  }
+
+  .chayns-text-area__help {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--k10);
+    margin-block-start: 6px;
+    font-size: var(--fs-caption);
+    color: var(--text-3);
+  }
+
+  .chayns-text-area__error {
+    color: var(--danger);
+  }
+
+  @media (forced-colors: active) {
+    .chayns-text-area__input:focus-visible {
+      outline: var(--focus-ring-size) solid ButtonText;
+      outline-offset: 1px;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .chayns-text-area__label {
+      transition: none;
+    }
+  }
+}