@kouji-ui/components 0.9.1 → 0.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kouji-ui/components",
-  "version": "0.9.1",
+  "version": "0.9.3",
   "description": "Opinionated styled Angular components built on @kouji-ui/core directives. Themed at runtime via @kouji-ui/themes.",
   "license": "MIT",
   "repository": {

package/src/accordion/accordion.css

@@ -0,0 +1,68 @@
+@layer kj.component {
+  .kj-accordion {
+    --kj-accordion-bg:     var(--kj-bg-body);
+    --kj-accordion-border: var(--kj-border-default);
+    --kj-accordion-radius: var(--kj-radius-box);
+
+    display: block;
+    background: var(--kj-accordion-bg);
+    border: var(--kj-border) solid var(--kj-accordion-border);
+    border-radius: var(--kj-accordion-radius);
+    overflow: hidden;
+  }
+
+  .kj-accordion-item { display: block; }
+  .kj-accordion-item + .kj-accordion-item { border-top: var(--kj-border) solid var(--kj-accordion-border); }
+
+  .kj-accordion-trigger {
+    width: 100%;
+    text-align: left;
+    background: none;
+    border: 0;
+    padding: var(--kj-space-md) var(--kj-space-lg);
+    color: var(--kj-fg-default);
+    font: 0.875rem / 1.4 var(--kj-font-sans);
+    font-weight: 600;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .kj-accordion-trigger::after {
+    content: '▾';
+    transition: transform 0.15s;
+  }
+  .kj-accordion-trigger[aria-expanded="true"]::after { transform: rotate(180deg); }
+  .kj-accordion-trigger:focus-visible { outline: 2px solid var(--kj-border-focus); outline-offset: -2px; }
+  .kj-accordion-trigger[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
+
+  /* Always in the DOM so open/close can animate; visual state is driven by
+     `[data-state]` from the headless directive. `overflow: hidden` clips the
+     content during the max-height transition so children don't bleed out. */
+  .kj-accordion-content {
+    color: var(--kj-fg-default);
+    font: 0.875rem / 1.5 var(--kj-font-sans);
+    overflow: hidden;
+    max-height: 0;
+    opacity: 0;
+    /* `padding` participates in the height transition — collapses to 0 when
+       closed so the panel reads as fully hidden. */
+    padding: 0 var(--kj-space-lg);
+    transition:
+      max-height var(--kj-transition, 0.2s ease),
+      opacity var(--kj-transition, 0.2s ease),
+      padding var(--kj-transition, 0.2s ease);
+  }
+  .kj-accordion-content[data-state="open"] {
+    /* `1000px` is the conventional "tall enough" ceiling for height tweens
+       on content of unknown size. If panels routinely exceed this, raise the
+       value — the cost is only a slightly slower expand animation. */
+    max-height: 1000px;
+    opacity: 1;
+    padding: 0 var(--kj-space-lg) var(--kj-space-md);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .kj-accordion-content { transition: none; }
+  }
+}

package/src/action-sheet/action-sheet.css

@@ -0,0 +1,79 @@
+@layer kj.component {
+  .kj-action-sheet__title {
+    margin: 0 0 var(--kj-space-xs);
+    font: 600 1.0625rem / 1.3 var(--kj-font-sans);
+    color: var(--kj-fg-default);
+    text-align: center;
+  }
+
+  .kj-action-sheet__description {
+    margin: 0 0 var(--kj-space-md);
+    font: 0.875rem / 1.4 var(--kj-font-sans);
+    color: var(--kj-fg-muted);
+    text-align: center;
+  }
+
+  .kj-action-sheet__list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--kj-space-2xs, 0.25rem);
+  }
+
+  .kj-action-sheet__item,
+  .kj-action-sheet__cancel {
+    appearance: none;
+    display: flex;
+    align-items: center;
+    gap: var(--kj-space-sm);
+    width: 100%;
+    min-height: 44px;
+    padding: var(--kj-space-sm) var(--kj-space-md);
+    border: 0;
+    border-radius: var(--kj-radius-md, 0.5rem);
+    background: var(--kj-bg-subtle, transparent);
+    color: var(--kj-fg-default);
+    font: 500 0.9375rem / 1.4 var(--kj-font-sans);
+    text-align: left;
+    cursor: pointer;
+  }
+
+  .kj-action-sheet__item:hover:not(:disabled),
+  .kj-action-sheet__cancel:hover {
+    background: var(--kj-bg-muted, var(--kj-border-muted));
+  }
+
+  .kj-action-sheet__item:focus-visible,
+  .kj-action-sheet__cancel:focus-visible {
+    outline: var(--kj-focus-ring-width, 2px) solid var(--kj-focus-ring-color, var(--kj-primary));
+    outline-offset: 2px;
+  }
+
+  .kj-action-sheet__item:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .kj-action-sheet__item.is-destructive {
+    color: var(--kj-danger-fg, var(--kj-danger, #d92d20));
+  }
+  .kj-action-sheet__item.is-destructive:hover:not(:disabled) {
+    background: var(--kj-danger-bg-subtle, color-mix(in srgb, var(--kj-danger, #d92d20) 12%, transparent));
+  }
+
+  .kj-action-sheet__icon {
+    flex-shrink: 0;
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .kj-action-sheet__label {
+    flex: 1;
+  }
+
+  .kj-action-sheet__cancel {
+    justify-content: center;
+    margin-top: var(--kj-space-sm);
+    font-weight: 600;
+    background: var(--kj-bg-muted, var(--kj-border-muted));
+  }
+}

package/src/alert/alert.css

@@ -0,0 +1,133 @@
+@layer kj.component {
+  .kj-alert {
+    /* component knobs — themes/users override any of these */
+    --kj-alert-bg:           var(--kj-bg-body);
+    --kj-alert-fg:           var(--kj-fg-default);
+    --kj-alert-border-color: var(--kj-border-default);
+    --kj-alert-accent:       var(--kj-fg-info);
+    --kj-alert-radius:       var(--kj-radius-box, 0.5rem);
+    --kj-alert-padding-x:    var(--kj-space-lg, 1rem);
+    --kj-alert-padding-y:    var(--kj-space-md, 0.75rem);
+    --kj-alert-gap:          var(--kj-space-md, 0.75rem);
+    --kj-alert-font-size:    var(--kj-text-sm, 0.875rem);
+
+    display: flex;
+    align-items: flex-start;
+    gap: var(--kj-alert-gap);
+    background: var(--kj-alert-bg);
+    color: var(--kj-alert-fg);
+    border: var(--kj-border, 1px) solid var(--kj-alert-border-color);
+    border-left: 4px solid var(--kj-alert-accent);
+    border-radius: var(--kj-alert-radius);
+    padding: var(--kj-alert-padding-y) var(--kj-alert-padding-x);
+    font: var(--kj-alert-font-size) / 1.45 var(--kj-font-sans, sans-serif);
+    transition: opacity 200ms ease, transform 200ms ease;
+  }
+
+  .kj-alert[data-dismissed="true"] {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+
+  /* Severity variants — flip accent + (optionally) bg/fg. */
+  .kj-alert[data-variant="info"]    { --kj-alert-accent: var(--kj-fg-info, #2563eb); }
+  .kj-alert[data-variant="success"] { --kj-alert-accent: var(--kj-fg-success, #16a34a); }
+  .kj-alert[data-variant="warning"] { --kj-alert-accent: var(--kj-fg-warning, #d97706); }
+  .kj-alert[data-variant="error"]   { --kj-alert-accent: var(--kj-fg-danger, #dc2626); }
+  .kj-alert[data-variant="neutral"] { --kj-alert-accent: var(--kj-fg-muted, #6b7280); }
+
+  /* Static / banner mode — span full width, sticky-friendly chrome. */
+  .kj-alert[data-mode="static"] {
+    border-left-width: var(--kj-border, 1px);
+    border-top: 4px solid var(--kj-alert-accent);
+    border-radius: 0;
+  }
+
+  /* Sizes */
+  .kj-alert[data-size="sm"] {
+    --kj-alert-padding-x: var(--kj-space-md, 0.75rem);
+    --kj-alert-padding-y: var(--kj-space-sm, 0.5rem);
+    --kj-alert-font-size: 0.8125rem;
+  }
+  .kj-alert[data-size="lg"] {
+    --kj-alert-padding-x: var(--kj-space-xl, 1.25rem);
+    --kj-alert-padding-y: var(--kj-space-lg, 1rem);
+    --kj-alert-font-size: 1rem;
+  }
+
+  /* ── Body wrapper ─────────────────────────────────────────────── */
+  .kj-alert__body {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  /* ── Title / Description ──────────────────────────────────────── */
+  .kj-alert__title {
+    margin: 0;
+    font-weight: 600;
+    font-size: 1em;
+    color: var(--kj-alert-accent);
+    line-height: 1.3;
+  }
+  .kj-alert__description {
+    margin: 0;
+    color: var(--kj-alert-fg);
+    opacity: 0.9;
+  }
+
+  /* ── Icon ─────────────────────────────────────────────────────── */
+  .kj-alert__icon {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25em;
+    height: 1.25em;
+    color: var(--kj-alert-accent);
+    margin-top: 0.1em;
+  }
+
+  /* ── Actions ──────────────────────────────────────────────────── */
+  .kj-alert__actions {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--kj-space-sm, 0.5rem);
+    margin-left: auto;
+  }
+
+  /* ── Dismiss ──────────────────────────────────────────────────── */
+  .kj-alert__dismiss {
+    flex: 0 0 auto;
+    appearance: none;
+    background: transparent;
+    border: 0;
+    color: inherit;
+    cursor: pointer;
+    padding: 4px 8px;
+    border-radius: 4px;
+    line-height: 1;
+    font-size: 1.1rem;
+    opacity: 0.7;
+    margin-left: auto;
+    /* Touch-target floor (WCAG 2.5.5) */
+    min-width: 2.75rem;
+    min-height: 2.75rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .kj-alert__dismiss:hover { opacity: 1; background: rgb(0 0 0 / 0.06); }
+  .kj-alert__dismiss:focus-visible {
+    outline: 2px solid var(--kj-alert-accent);
+    outline-offset: 2px;
+  }
+
+  /* When actions and dismiss coexist, dismiss should not push actions away. */
+  .kj-alert__actions + .kj-alert__dismiss {
+    margin-left: 0;
+  }
+}

package/src/avatar/avatar.css

@@ -0,0 +1,93 @@
+@layer kj.component {
+  .kj-avatar {
+    --kj-avatar-size: 2.5rem;
+    --kj-avatar-bg: var(--kj-bg-field);
+    --kj-avatar-fg: var(--kj-fg-default);
+    --kj-avatar-radius: 9999px;
+
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--kj-avatar-size);
+    height: var(--kj-avatar-size);
+    background: var(--kj-avatar-bg);
+    color: var(--kj-avatar-fg);
+    border-radius: var(--kj-avatar-radius);
+    overflow: hidden;
+    font: 0.875rem / 1 var(--kj-font-sans);
+    font-weight: 600;
+  }
+
+  /* `rounded` reads `--kj-radius-box-lg` (1rem default, declared in
+     `kj.base`) rather than `--kj-radius-box` because some themes (kouji,
+     bauhaus) set `--kj-radius-box` to 0 as a brutalist signature — falling
+     back to that would make `rounded` and `circle` look identical on those
+     themes. `--kj-radius-box-lg` stays unset by theme overrides, so the
+     toggle always produces a visible shape change. */
+  .kj-avatar[data-shape='rounded'] {
+    --kj-avatar-radius: var(--kj-radius-box-lg);
+  }
+
+  /* The host's `[hidden]` attribute (written by the avatar-group when a
+     child overflows `kjMax`) needs an explicit `display: none` because the
+     `inline-flex` declaration above wins against the UA `[hidden] { display:
+     none }` rule via selector specificity. Without this, "hidden" overflow
+     avatars still render and `kjMax` looks broken. */
+  .kj-avatar[hidden] {
+    display: none;
+  }
+
+  /* The "+N" chip is a native button wrapping the +N avatar: no chrome of
+     its own, the avatar paints; the open state tints the avatar. */
+  .kj-avatar-group-overflow-trigger {
+    display: inline-flex;
+    padding: 0;
+    border: 0;
+    background: none;
+    border-radius: 9999px;
+  }
+  .kj-avatar-group-overflow-trigger[aria-expanded='true'] .kj-avatar {
+    --kj-avatar-bg: var(--kj-bg-primary);
+    --kj-avatar-fg: var(--kj-fg-on-primary);
+  }
+
+  .kj-avatar[data-size='xs'] {
+    --kj-avatar-size: 1.5rem;
+    font-size: 0.6875rem;
+  }
+  .kj-avatar[data-size='sm'] {
+    --kj-avatar-size: 2rem;
+    font-size: 0.75rem;
+  }
+  .kj-avatar[data-size='lg'] {
+    --kj-avatar-size: 3rem;
+    font-size: 1rem;
+  }
+  .kj-avatar[data-size='xl'] {
+    --kj-avatar-size: 4rem;
+    font-size: 1.25rem;
+  }
+
+  .kj-avatar-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+  .kj-avatar-image:not([data-loaded]) {
+    opacity: 0;
+  }
+
+  .kj-avatar-fallback {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .kj-avatar-fallback:not([data-visible]) {
+    opacity: 0;
+    pointer-events: none;
+  }
+}

package/src/badge/badge.css

@@ -0,0 +1,59 @@
+@layer kj.component {
+  .kj-badge {
+    --kj-badge-bg:           var(--kj-bg-primary);
+    --kj-badge-fg:           var(--kj-fg-on-primary);
+    --kj-badge-border-color: transparent;
+    --kj-badge-radius:       var(--kj-radius-selector);
+    --kj-badge-padding-x:    var(--kj-space-sm);
+    --kj-badge-padding-y:    0.125rem;
+    --kj-badge-font-size:    0.75rem;
+    --kj-badge-dot-size:     0.375rem;
+    --kj-badge-dot-color:    currentColor;
+
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    background: var(--kj-badge-bg);
+    color: var(--kj-badge-fg);
+    border: var(--kj-border) solid var(--kj-badge-border-color);
+    border-radius: var(--kj-badge-radius);
+    padding: var(--kj-badge-padding-y) var(--kj-badge-padding-x);
+    font: var(--kj-badge-font-size) / 1 var(--kj-font-sans);
+    font-weight: 500;
+  }
+
+  .kj-badge[data-dot]::before {
+    content: "";
+    flex: none;
+    width: var(--kj-badge-dot-size);
+    height: var(--kj-badge-dot-size);
+    border-radius: 50%;
+    background: var(--kj-badge-dot-color);
+  }
+
+  .kj-badge[data-variant="secondary"] {
+    --kj-badge-bg: var(--kj-bg-surface);
+    --kj-badge-fg: var(--kj-fg-default);
+  }
+  .kj-badge[data-variant="destructive"] {
+    --kj-badge-bg: var(--kj-bg-danger);
+    --kj-badge-fg: var(--kj-fg-on-danger);
+  }
+  .kj-badge[data-variant="outline"] {
+    --kj-badge-bg: transparent;
+    --kj-badge-fg: var(--kj-fg-default);
+    --kj-badge-border-color: var(--kj-border-default);
+  }
+
+  .kj-badge[data-size="xs"] {
+    --kj-badge-padding-x: 0.1875rem;
+    --kj-badge-padding-y: 0.03125rem;
+    --kj-badge-font-size: 0.5625rem;
+  }
+  .kj-badge[data-size="sm"] {
+    --kj-badge-padding-x: 0.375rem;
+    --kj-badge-padding-y: 0.125rem;
+    --kj-badge-font-size: 0.6875rem;
+  }
+  .kj-badge[data-size="lg"] { --kj-badge-padding-x: var(--kj-space-md); --kj-badge-font-size: 0.875rem; }
+}

package/src/breadcrumb/breadcrumb.css

@@ -0,0 +1,145 @@
+/* ─────────────────────────────────────────────────────────────
+   .kj-breadcrumb — component-layer tokens + structural CSS
+   Tokens default to shared-layer values from @kouji-ui/themes.
+   The component owns its own gap, separator content, and per-cell
+   colours; the per-crumb anchor inherits Link's tokens by default.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.component {
+  .kj-breadcrumb {
+    /* component knobs — themes / users can override any of these */
+    --kj-breadcrumb-gap:                var(--kj-space-sm, 0.5rem);
+    --kj-breadcrumb-separator-content:  '/';
+    --kj-breadcrumb-overflow-pad:       0.25rem;
+    --kj-color-breadcrumb-muted:        var(--kj-fg-muted);
+    --kj-color-breadcrumb-current:      var(--kj-fg-default);
+
+    display: block;
+    color: var(--kj-color-breadcrumb-muted);
+    font-size: 0.875rem;
+  }
+
+  /* ── Sizes (root) ───────────────────────────────────────────── */
+  .kj-breadcrumb[data-size="sm"] { font-size: 0.8125rem; }
+  .kj-breadcrumb[data-size="md"] { font-size: 0.875rem; }
+  .kj-breadcrumb[data-size="lg"] { font-size: 1rem; }
+
+  /* ── Ordered list ───────────────────────────────────────────── */
+  .kj-breadcrumb-list {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    gap: var(--kj-breadcrumb-gap);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    min-width: 0;
+  }
+
+  .kj-breadcrumb-list[data-wrap="wrap"]     { flex-wrap: wrap; }
+  .kj-breadcrumb-list[data-wrap="no-wrap"]  { flex-wrap: nowrap; }
+  .kj-breadcrumb-list[data-wrap="truncate"] { flex-wrap: nowrap; }
+
+  /* ── Item ───────────────────────────────────────────────────── */
+  .kj-breadcrumb-item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--kj-breadcrumb-gap);
+    min-width: 0;
+  }
+
+  .kj-breadcrumb-item[data-hidden] { display: none; }
+
+  /* ── Auto separator (CSS pseudo-element) ────────────────────── */
+  .kj-breadcrumb-list:not([data-explicit-separators]) > .kj-breadcrumb-item:not(:first-child)::before {
+    content: var(--kj-breadcrumb-separator-content, '/');
+    color: var(--kj-color-breadcrumb-muted);
+    opacity: 0.65;
+    user-select: none;
+    margin-inline-end: var(--kj-breadcrumb-gap);
+  }
+
+  /* RTL mirroring: chevron-like glyphs flip; slashes stay. The data-attr
+     is set by the consumer when they want mirroring; we ship the rule. */
+  [dir="rtl"] .kj-breadcrumb-list:not([data-explicit-separators]) > .kj-breadcrumb-item:not(:first-child)::before {
+    /* No-op for '/'. For '›' / '→' the consumer adds [data-mirror-separator]. */
+  }
+  [dir="rtl"] .kj-breadcrumb[data-mirror-separator] .kj-breadcrumb-list:not([data-explicit-separators]) > .kj-breadcrumb-item:not(:first-child)::before {
+    display: inline-block;
+    transform: scaleX(-1);
+  }
+
+  /* ── Explicit separator ─────────────────────────────────────── */
+  .kj-breadcrumb-separator {
+    display: inline-flex;
+    align-items: center;
+    color: var(--kj-color-breadcrumb-muted);
+    opacity: 0.65;
+    user-select: none;
+  }
+
+  /* ── Per-crumb link ─────────────────────────────────────────────
+     Owns its resting colour. The anchor carries `.kj-link`, but the
+     KjLink *component* (which ships link.css) may not be on the page,
+     so those rules aren't guaranteed to load — without an explicit
+     colour the anchor falls back to the UA default blue in every theme.
+     Retargeting the Link tokens keeps styling consistent when link.css
+     *is* present. */
+  .kj-breadcrumb-link {
+    --kj-link-fg: var(--kj-color-breadcrumb-muted);
+    --kj-link-hover-fg: var(--kj-color-breadcrumb-current);
+    color: var(--kj-link-fg);
+    text-decoration: none;
+    padding-block: 0.5rem; /* hit-area extension for WCAG 2.5.5 */
+    transition: color var(--kj-transition, 0.15s ease);
+  }
+
+  .kj-breadcrumb-link:hover {
+    color: var(--kj-link-hover-fg);
+    text-decoration: underline;
+    text-underline-offset: 3px;
+  }
+
+  /* Self-contained focus ring — link.css may not be loaded (see above),
+     so don't depend on `.kj-link:focus-visible` for WCAG 2.4.7. */
+  .kj-breadcrumb-link:focus-visible {
+    outline: 2px solid var(--kj-fg-primary);
+    outline-offset: 2px;
+    border-radius: var(--kj-radius-field, 0.25rem);
+  }
+
+  /* ── Current cell ───────────────────────────────────────────── */
+  .kj-breadcrumb-current {
+    color: var(--kj-color-breadcrumb-current);
+    font-weight: 500;
+  }
+
+  /* ── Ellipsis cell ──────────────────────────────────────────── */
+  .kj-breadcrumb-ellipsis {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.5rem;
+    padding-inline: var(--kj-breadcrumb-overflow-pad);
+    color: var(--kj-color-breadcrumb-muted);
+    background: transparent;
+    border: 0;
+    cursor: default;
+    user-select: none;
+  }
+
+  .kj-breadcrumb-ellipsis[data-overflow="menu"] {
+    cursor: pointer;
+    border-radius: var(--kj-radius-field, 0.25rem);
+  }
+
+  .kj-breadcrumb-ellipsis[data-overflow="menu"]:hover {
+    background: var(--kj-bg-surface, transparent);
+  }
+
+  /* ── Print: show the full breadcrumb ────────────────────────── */
+  @media print {
+    .kj-breadcrumb-item[data-hidden] { display: revert; }
+    .kj-breadcrumb-ellipsis          { display: none; }
+  }
+}