@chayns-ui/core 0.6.0 → 0.8.0

package/README.md

@@ -36,11 +36,11 @@ import '@chayns-ui/core/button.css';
 
 | Import | CSS-Export |
 |---|---|
-| `Button`, `IconButton` | `@chayns-ui/core/button.css` |
+| `Button`, `IconButton`, `SplitButton` | `@chayns-ui/core/button.css`, `@chayns-ui/core/split-button.css` |
 | `Card` | `@chayns-ui/core/card.css` |
-| `Avatar`, `AvatarGroup` | `@chayns-ui/core/avatar.css` |
+| `Avatar`, `AvatarGroup`, `Badge`, `Banner` | matching CSS exports |
 | `List` | `@chayns-ui/core/list.css` |
-| `TextField`, `TextArea`, `Checkbox`, `Switch`, `RadioGroup`, `SegmentedControl`, `MessageBox` | their matching CSS export |
+| `TextField`, `TextArea`, `Checkbox`, `Switch`, `RadioGroup`, `SegmentedControl`, `Banner`, `ComboBox` | matching CSS exports |
 | `Accordion`, `AccordionGroup` | `@chayns-ui/core/accordion.css` |
 | `Popup`, `PopupList` | `@chayns-ui/core/popup.css` |
 | `SplitButton` | `@chayns-ui/core/split-button.css` |
@@ -50,6 +50,12 @@ Alternativ lädt `@chayns-ui/core/styles.css` das gebündelte CSS aller Komponen
 `ListItem` wurde vor 1.0 durch `List.Item` ersetzt. Komponiere Zeilen mit
 `List.Item.Action`, `List.Item.Body`, `List.Item.Title` und optionalen Slots.
 
+`ComboBox` unterstützt Single-Select und Multi-Select. `TextField` und
+`TextArea` akzeptieren native `type`- beziehungsweise `autoComplete`-Werte,
+einschließlich `type="password"`; eine Sichtbarkeitsumschaltung ist kein Teil
+des Core-Vertrags. `Badge` ist ein statischer Statusindikator, während
+`Banner` ein optional schließbares Statusmuster ist.
+
 ## Hinweise
 
 Die Bibliothek lädt keine Fonts, injiziert kein CSS und kalibriert keine

package/dist/accordion.css

@@ -45,6 +45,12 @@
     cursor: pointer;
   }
 
+  .chayns-accordion--list > .chayns-accordion__header {
+    gap: var(--k12);
+    padding: var(--k12) var(--k16);
+    transition: background 0.16s ease;
+  }
+
   .chayns-accordion--wrapped > .chayns-accordion__header {
     gap: var(--k10);
     padding: var(--k10) var(--k12);
@@ -80,7 +86,47 @@
     color: var(--text);
   }
 
-  .chayns-accordion--open > .chayns-accordion__header > .chayns-accordion__title {
+  .chayns-accordion__head-content {
+    display: flex;
+    min-inline-size: 0;
+    flex: 1;
+    flex-direction: column;
+  }
+
+  .chayns-accordion__subtitle {
+    overflow: hidden;
+    color: var(--text-3);
+    font-size: var(--fs-meta);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .chayns-accordion__leading {
+    display: inline-flex;
+    inline-size: var(--k32);
+    block-size: var(--k32);
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  .chayns-accordion--list .chayns-accordion__leading {
+    inline-size: var(--k38);
+    block-size: var(--k38);
+  }
+
+  .chayns-accordion--list .chayns-accordion__leading > .chayns-avatar--small {
+    inline-size: var(--k38);
+    block-size: var(--k38);
+  }
+
+  .chayns-accordion__leading > * {
+    max-inline-size: 100%;
+    max-block-size: 100%;
+  }
+
+  .chayns-accordion--open .chayns-accordion__title {
     font-weight: 600;
   }
 
@@ -112,6 +158,18 @@
     color: var(--text-3);
   }
 
+  .chayns-accordion--has-leading .chayns-accordion__content {
+    padding-inline-start: calc(var(--k16) + var(--k16) + var(--k12) + var(--k32) + var(--k12));
+  }
+
+  .chayns-accordion--list .chayns-accordion__content {
+    padding: 0 var(--k16) var(--k14) calc(var(--k16) + var(--k16) + var(--k12));
+  }
+
+  .chayns-accordion--wrapped.chayns-accordion--has-leading .chayns-accordion__content {
+    padding-inline-start: calc(var(--k12) + var(--k14) + var(--k10) + var(--k32) + var(--k10));
+  }
+
   .chayns-accordion--wrapped
     > .chayns-accordion__panel
     > .chayns-accordion__inner
@@ -127,10 +185,16 @@
     color: var(--muted);
   }
 
-  .chayns-accordion--disabled > .chayns-accordion__header > .chayns-accordion__title {
+  .chayns-accordion--disabled .chayns-accordion__title {
     color: var(--muted);
   }
 
+  .chayns-accordion--list.chayns-accordion--open
+    > .chayns-accordion__header
+    .chayns-accordion__title {
+    font-weight: 500;
+  }
+
   @media (hover: hover) {
     .chayns-accordion__header:not(:disabled):hover {
       background: var(--hover);

package/dist/avatar.css

@@ -1,5 +1,7 @@
 @layer chayns.components {
   .chayns-avatar {
+    --chayns-avatar-initials-lightness: 25%;
+
     position: relative;
     display: inline-flex;
     flex: none;
@@ -9,7 +11,7 @@
     block-size: var(--k44);
     overflow: visible;
     border-radius: 50%;
-    background: var(--accent);
+    background: var(--chayns-avatar-initials-color, var(--accent));
     color: var(--on-accent);
     font-size: var(--fs-body);
     font-weight: 600;
@@ -17,16 +19,8 @@
     vertical-align: middle;
   }
 
-  .chayns-avatar--tone-0 {
-    background: var(--accent);
-  }
-
-  .chayns-avatar--tone-1 {
-    background: var(--accent-hover);
-  }
-
-  .chayns-avatar--tone-2 {
-    background: var(--accent-active);
+  :is(.chayns-theme--dark .chayns-avatar, .chayns-theme--dark.chayns-avatar) {
+    --chayns-avatar-initials-lightness: 70%;
   }
 
   .chayns-avatar--small {

package/dist/badge.css

@@ -31,16 +31,16 @@
   .chayns-badge--success {
     /* stylelint-disable-next-line custom-property-pattern */
     background: var(--success-bg);
-    color: var(--text);
+    color: var(--success);
   }
 
   .chayns-badge--warning {
     background: var(--warning-bg);
-    color: var(--text);
+    color: var(--warning);
   }
 
   .chayns-badge--danger {
     background: var(--danger-bg);
-    color: var(--text);
+    color: var(--danger);
   }
 }

package/dist/banner.css

@@ -0,0 +1,89 @@
+@layer chayns.components {
+  .chayns-banner {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: var(--k13);
+    inline-size: 100%;
+    padding: var(--k13) var(--k16);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    background: var(--surface-alt);
+    color: var(--text);
+  }
+
+  .chayns-banner--success {
+    /* stylelint-disable-next-line custom-property-pattern */
+    border-color: var(--success);
+    /* stylelint-disable-next-line custom-property-pattern */
+    background: var(--success-bg);
+  }
+
+  .chayns-banner--neutral {
+    border-color: var(--accent-300);
+  }
+
+  .chayns-banner--warning {
+    border-color: var(--warning);
+    background: var(--warning-bg);
+  }
+
+  .chayns-banner--danger {
+    border-color: var(--danger);
+    background: var(--danger-bg);
+  }
+
+  .chayns-banner__icon {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--icon-lg);
+    block-size: var(--icon-lg);
+    color: var(--accent);
+  }
+
+  .chayns-banner--success .chayns-banner__icon {
+    /* stylelint-disable-next-line custom-property-pattern */
+    color: var(--success);
+  }
+
+  .chayns-banner--warning .chayns-banner__icon {
+    color: var(--warning);
+  }
+
+  .chayns-banner--danger .chayns-banner__icon {
+    color: var(--danger);
+  }
+
+  .chayns-banner__content {
+    min-inline-size: 0;
+    flex: 1;
+  }
+
+  .chayns-banner__close {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--k28);
+    block-size: var(--k28);
+    margin-block-start: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--text-2);
+    cursor: pointer;
+  }
+
+  .chayns-banner__close:hover {
+    background: var(--hover);
+    color: var(--text);
+  }
+
+  .chayns-banner__close:focus-visible {
+    outline: var(--focus-ring-size) solid rgb(var(--focus-ring-rgb), var(--focus-ring-alpha-strong));
+    outline-offset: 2px;
+  }
+}

package/dist/button.css

@@ -65,11 +65,11 @@
   }
 
   :where(.chayns-button, .chayns-icon-button):active:not(:disabled) {
-    transform: scale(0.97);
+    transform: scale(0.96);
   }
 
   :where(.chayns-icon-button):active:not(:disabled) {
-    transform: scale(0.9);
+    transform: scale(0.96);
   }
 
   :where(.chayns-button--primary, .chayns-icon-button--primary):active:not(:disabled) {
@@ -135,6 +135,10 @@
     display: none;
   }
 
+  :where(.chayns-button--loading, .chayns-icon-button--loading) .chayns-button-icon {
+    animation: chayns-button-spin 0.8s linear infinite;
+  }
+
   :where(.chayns-button, .chayns-icon-button):active:not(:disabled)
     .chayns-button-icon__weight:not(.chayns-button-icon__weight--active) {
     display: none;
@@ -203,5 +207,15 @@
     :where(.chayns-button, .chayns-icon-button) {
       transition: none;
     }
+
+    :where(.chayns-button--loading, .chayns-icon-button--loading) .chayns-button-icon {
+      animation: none;
+    }
+  }
+
+  @keyframes chayns-button-spin {
+    to {
+      transform: rotate(360deg);
+    }
   }
 }

package/dist/card.css

@@ -2,12 +2,39 @@
   .chayns-card {
     box-sizing: border-box;
     display: block;
+    padding: var(--k16);
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: 16px;
   }
 
-  .chayns-card--elevated {
-    box-shadow: var(--shadow-card);
+  .chayns-card__header {
+    display: flex;
+    align-items: center;
+    gap: var(--k12);
+    margin-block-end: var(--k12);
+    color: var(--text);
+    font-size: var(--fs-body);
+    font-weight: 600;
+  }
+
+  .chayns-card__header-icon {
+    display: inline-grid;
+    inline-size: var(--k32);
+    block-size: var(--k32);
+    flex: none;
+    place-items: center;
+    border-radius: 8px;
+    background: var(--surface-alt);
+  }
+
+  .chayns-card__header-content {
+    min-inline-size: 0;
+  }
+
+  @media (hover: hover) {
+    .chayns-card:hover {
+      box-shadow: var(--shadow-hover);
+    }
   }
 }

package/dist/checkbox.css

@@ -1,7 +1,7 @@
 @layer chayns.components {
   .chayns-checkbox {
     display: inline-flex;
-    align-items: flex-start;
+    align-items: center;
     gap: var(--k12);
     margin: 0;
     color: var(--text);
@@ -20,25 +20,24 @@
 
   .chayns-checkbox__control {
     box-sizing: border-box;
-    display: inline-grid;
+    display: inline-flex;
     inline-size: var(--k20);
     block-size: var(--k20);
     flex: none;
-    place-items: center;
+    align-items: center;
+    justify-content: center;
     margin-block-start: 1px;
     border: 2px solid var(--input-border);
     border-radius: 6px;
     background: transparent;
+    color: var(--on-accent);
+    font-size: var(--fs-micro);
+    transition: all 0.15s ease;
   }
 
-  .chayns-checkbox__control::after {
-    inline-size: calc(var(--k8) - 2px);
-    block-size: var(--k12);
-    border-inline-end: 2px solid var(--on-accent);
-    border-block-end: 2px solid var(--on-accent);
-    content: '';
+  .chayns-checkbox__control > i {
     opacity: 0;
-    transform: rotate(45deg) scale(0.6);
+    transform: scale(0.4);
     transition:
       opacity 0.12s ease,
       transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
@@ -49,9 +48,9 @@
     background: var(--accent);
   }
 
-  .chayns-checkbox__input:checked + .chayns-checkbox__control::after {
+  .chayns-checkbox__input:checked + .chayns-checkbox__control > i {
     opacity: 1;
-    transform: rotate(45deg) scale(1);
+    transform: scale(1);
   }
 
   .chayns-checkbox__input:focus-visible + .chayns-checkbox__control {
@@ -75,8 +74,20 @@
     line-height: 1.4;
   }
 
+  .chayns-checkbox__content {
+    display: grid;
+    gap: var(--k2);
+    min-inline-size: 0;
+  }
+
+  .chayns-checkbox__description {
+    color: var(--text-3);
+    font-size: var(--fs-meta);
+    line-height: 1.4;
+  }
+
   @media (prefers-reduced-motion: reduce) {
-    .chayns-checkbox__control::after {
+    .chayns-checkbox__control > i {
       transition: none;
     }
   }

package/dist/combo-box.css

@@ -8,7 +8,7 @@
     box-sizing: border-box;
     inline-size: 100%;
     min-block-size: calc(1.2em + 2 * var(--input-py) + 3px);
-    padding: var(--input-py) var(--input-px);
+    padding: var(--input-py) var(--k36) var(--input-py) var(--input-px);
     border: 1.5px solid var(--input-border);
     border-radius: 10px;
     background: var(--surface);
@@ -45,6 +45,23 @@
     white-space: nowrap;
   }
 
+  .chayns-combo-box__chevron {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-end: var(--input-px);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--muted);
+    pointer-events: none;
+    transform: translateY(-50%);
+    transition: transform 0.18s ease;
+  }
+
+  .chayns-combo-box--open .chayns-combo-box__chevron {
+    transform: translateY(-50%) rotate(180deg);
+  }
+
   .chayns-combo-box--open .chayns-combo-box__label,
   .chayns-combo-box__input:not(:placeholder-shown) + .chayns-combo-box__label {
     color: var(--accent);
@@ -137,7 +154,8 @@
 
   @media (prefers-reduced-motion: reduce) {
     .chayns-combo-box__input,
-    .chayns-combo-box__label {
+    .chayns-combo-box__label,
+    .chayns-combo-box__chevron {
       transition: none;
     }
   }

package/dist/components/accordion/Accordion.d.ts

@@ -1,4 +1,12 @@
-import type { AccordionProps } from './Accordion.types.js';
-declare const Accordion: ({ children, className, defaultOpen, disabled, id, onOpenChange, open, ref, title, ...rootProps }: AccordionProps) => import("react").JSX.Element;
+import type { AccordionContentProps, AccordionHeadContentProps, AccordionHeadProps, AccordionPartProps, AccordionProps } from './Accordion.types.js';
+declare function HeadContent({ className, subtitle, title }: AccordionHeadContentProps): import("react").JSX.Element;
+declare const Accordion: import("react").ForwardRefExoticComponent<Omit<AccordionProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    Content: import("react").ForwardRefExoticComponent<Omit<AccordionContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Head: import("react").ForwardRefExoticComponent<Omit<AccordionHeadProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>> & {
+        Content: typeof HeadContent;
+        Leading: (props: AccordionPartProps) => import("react").JSX.Element;
+        Trailing: (props: AccordionPartProps) => import("react").JSX.Element;
+    };
+};
 export default Accordion;
 //# sourceMappingURL=Accordion.d.ts.map

package/dist/components/accordion/Accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/Accordion.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,QAAA,MAAM,SAAS,GAAI,kGAWhB,cAAc,gCAkFhB,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/Accordion.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EACV,qBAAqB,EACrB,yBAAyB,EACzB,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACf,MAAM,sBAAsB,CAAC;AAgB9B,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,yBAAyB,+BAS7E;AA8JD,QAAA,MAAM,SAAS;;;;yBA1Ka,kBAAkB;0BACjB,kBAAkB;;CAgL7C,CAAC;AAEH,eAAe,SAAS,CAAC"}