css-is-awesome 1.1.0

package/scss/components/_feedback.scss

@@ -0,0 +1,197 @@
+// ============================================================================
+// FEEDBACK — Alert, Toast, Badge, Tag, Progress
+// ============================================================================
+@use 'sass:map';
+@use '../theme' as t;
+@use '../system' as s;
+@use '../mixins' as m;
+
+// ----------------------------------------------------------------------------
+// ALERT
+// ----------------------------------------------------------------------------
+// Usage:
+//   .alert         { @include alert-base; }
+//   .alert-success { @include alert(success); }
+//   .alert-error   { @include alert(error); }
+
+@mixin alert-base($py: 2, $px: 4, $r: md, $border-width: 1px) {
+  display: flex;
+  align-items: flex-start;
+  gap: m.space(2);
+  padding: var(--alert-padding-y, #{m.space($py)}) var(--alert-padding-x, #{m.space($px)});
+  border-radius: var(--alert-radius, #{m.radius($r)});
+  border: $border-width solid transparent;
+  @include m.font(reg, 2);
+}
+
+@mixin alert($status: info, $py: 2, $px: 4, $r: md) {
+  @include alert-base($py: $py, $px: $px, $r: $r);
+  background: m.color(#{$status}-subtle);
+  border-color: m.color(#{$status}-default);
+  color: m.color(#{$status}-text);
+}
+
+// ----------------------------------------------------------------------------
+// TOAST
+// ----------------------------------------------------------------------------
+@mixin toast-base($py: 2, $px: 4, $r: lg, $shadow: 3) {
+  display: flex;
+  align-items: center;
+  gap: m.space(2);
+  padding: m.space($py) m.space($px);
+  border-radius: m.radius($r);
+  background: m.color(surface-default);
+  box-shadow: m.shadow($shadow);
+  @include m.font(reg, 2);
+}
+
+// ----------------------------------------------------------------------------
+// BADGE — moved to _data.scss in v0.8.1 (next to card-base/table-base).
+// (Re-exported via the components barrel, so `cia.badge-base` still works.)
+// ----------------------------------------------------------------------------
+
+// ----------------------------------------------------------------------------
+// TAG / CHIP
+// ----------------------------------------------------------------------------
+// Usage:
+//   .tag       { @include tag; }
+//   .tag-x     { @include tag($removable: true); }
+@mixin tag(
+  $py: 2xs,
+  $px: 2,
+  $r: md,
+  $font-size: 2,
+  $removable: false
+) {
+  display: inline-flex;
+  align-items: center;
+  gap: m.space(2xs);
+  padding: var(--tag-padding-y, #{m.space($py)}) var(--tag-padding-x, #{m.space($px)});
+  border-radius: var(--tag-radius, #{m.radius($r)});
+  @include m.font(reg, $font-size);
+  background: m.color(surface-muted);
+  color: m.color(text-primary);
+  border: 1px solid m.color(border-default);
+
+  @if $removable {
+    padding-right: m.space(2xs);
+  }
+}
+
+// ----------------------------------------------------------------------------
+// PROGRESS BAR
+// ----------------------------------------------------------------------------
+// Two primitives + a composer.
+//
+// Primitives (compose your own markup):
+//   .my-track { @include progress-track-base; }
+//   .my-track > .fill { @include progress-fill-base; }
+//
+// Composer (one mixin, data-slot markup):
+//   <div class="my-progress" role="progressbar"><span data-slot="fill" style="inline-size: 60%"></span></div>
+//   .my-progress { @include progress; }
+//
+// Renamed from progress-track / progress-fill in v0.8.1 (added -base suffix
+// to signal "compose me" intent and unblock the progress() router name).
+@mixin progress-track-base($height: 0.5rem, $r: full, $bg: surface-muted) {
+  width: 100%;
+  height: $height;
+  border-radius: m.radius($r);
+  background: m.color($bg);
+  overflow: hidden;
+}
+
+@mixin progress-fill-base($color: action-primary-default) {
+  height: 100%;
+  border-radius: inherit;
+  background: m.color($color);
+  @include m.transition(inline-size, slow);
+}
+
+@mixin progress(
+  $height: 0.5rem,
+  $r: full,
+  $bg: surface-muted,
+  $fill: action-primary-default,
+) {
+  @include progress-track-base($height, $r, $bg);
+  > [data-slot='fill'] { @include progress-fill-base($fill); }
+}
+
+// ----------------------------------------------------------------------------
+// SPINNER
+// ----------------------------------------------------------------------------
+// A circular loading indicator. Inherits size from font-size of the parent.
+// Respects prefers-reduced-motion — drops to a pulsing opacity.
+@mixin spinner(
+  $size: 1.25em,
+  $thickness: 2px,
+  $color: action-primary-default
+) {
+  display: inline-block;
+  width: $size;
+  height: $size;
+  border: $thickness solid m.color(border-default);
+  border-top-color: m.color($color);
+  border-radius: 50%;
+  animation: cia-spinner-rotate 0.7s linear infinite;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: cia-spinner-pulse 1.2s ease-in-out infinite;
+    border-top-color: m.color($color);
+  }
+
+  /* Keyframes scoped via @at-root — emit only when the mixin is called */
+  @at-root {
+    @keyframes cia-spinner-rotate {
+      to { transform: rotate(360deg); }
+    }
+    @keyframes cia-spinner-pulse {
+      0%, 100% { opacity: 0.4; }
+      50%      { opacity: 1; }
+    }
+  }
+}
+
+// ----------------------------------------------------------------------------
+// SKELETON
+// ----------------------------------------------------------------------------
+// A placeholder loading shape that shimmers across its surface while waiting
+// for real content. Respects prefers-reduced-motion — drops to a subtle
+// pulse instead of the shimmer sweep.
+@mixin skeleton(
+  $bg: surface-muted,
+  $highlight: surface-subtle,
+  $r: md
+) {
+  display: block;
+  background-color: m.color($bg);
+  background-image: linear-gradient(
+    90deg,
+    transparent 0%,
+    m.color($highlight) 50%,
+    transparent 100%
+  );
+  background-size: 200% 100%;
+  background-repeat: no-repeat;
+  background-position: -100% 0;
+  border-radius: m.radius($r);
+  animation: cia-skeleton-shimmer 1.6s linear infinite;
+
+  @media (prefers-reduced-motion: reduce) {
+    background-image: none;
+    animation: cia-skeleton-pulse 1.6s ease-in-out infinite;
+  }
+
+  /* Keyframes scoped via @at-root — emit only when the mixin is called */
+  @at-root {
+    @keyframes cia-skeleton-shimmer {
+      0%   { background-position: -100% 0; }
+      100% { background-position: 200% 0; }
+    }
+    @keyframes cia-skeleton-pulse {
+      0%, 100% { opacity: 1; }
+      50%      { opacity: 0.7; }
+    }
+  }
+}

package/scss/components/_forms.scss

@@ -0,0 +1,272 @@
+// ============================================================================
+// FORM CONTROLS
+// ============================================================================
+// Input, select, textarea, checkbox, radio, label, form layout.
+//
+// Usage:
+//   input    { @include input-base; }
+//   label    { @include label-base; }
+//   .form    { @include form-layout(2); }
+//   .field   { @include form-group; }
+// ============================================================================
+@use 'sass:map';
+@use '../theme' as t;
+@use '../system' as s;
+@use '../mixins' as m;
+
+// ----------------------------------------------------------------------------
+// INPUT
+// ----------------------------------------------------------------------------
+@mixin input-base(
+  $py: 1,
+  $px: 2,
+  $r: md,
+  $border-width: 1px,
+  $bg: surface-default,
+  $border-color: border-default,
+  $font-size: null
+) {
+  min-height: var(--touch-target-min, 24px);                   /* WCAG 2.2 SC 2.5.8 */
+  padding: var(--input-padding-y, #{m.space($py)}) var(--input-padding-x, #{m.space($px)});
+  border: var(--input-border-width, #{$border-width}) solid m.color($border-color);
+  border-radius: var(--input-radius, #{m.radius($r)});
+  background: m.color($bg);
+  @include m.transition(border-color, box-shadow);
+
+  @if $font-size {
+    font-size: m.font-size($font-size);
+  }
+
+  &:focus {
+    outline: none;
+    border-color: m.color(border-focus);
+    box-shadow: 0 0 0 3px rgba(m.color-static(border-focus), 0.2);
+  }
+
+  &::placeholder {
+    color: m.color(text-muted);
+  }
+
+  &:disabled { @include m.disabled; }
+}
+
+// ----------------------------------------------------------------------------
+// SELECT
+// ----------------------------------------------------------------------------
+@mixin select-base(
+  $py: 1,
+  $px: 2,
+  $r: md,
+  $bg: surface-default,
+  $border-color: border-default
+) {
+  @include input-base($py: $py, $px: $px, $r: $r, $bg: $bg, $border-color: $border-color);
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23525252' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right m.space-raw(2) center;
+  background-size: 1em;
+  padding-right: m.space-raw(6);
+}
+
+// ----------------------------------------------------------------------------
+// TEXTAREA
+// ----------------------------------------------------------------------------
+@mixin textarea-base(
+  $py: 2,
+  $px: 2,
+  $r: md,
+  $min-height: 6rem,
+  $resize: vertical
+) {
+  @include input-base($py: $py, $px: $px, $r: $r);
+  min-height: $min-height;
+  resize: $resize;
+}
+
+// ----------------------------------------------------------------------------
+// CHECKBOX & RADIO
+// ----------------------------------------------------------------------------
+@mixin check-base($size: 1.125rem, $r: sm, $color: action-primary-default) {
+  appearance: none;
+  width: $size;
+  height: $size;
+  border: 2px solid m.color(border-default);
+  border-radius: m.radius($r);
+  background: m.color(surface-default);
+  @include m.transition(background-color, border-color);
+  cursor: pointer;
+  flex-shrink: 0;
+
+  &:checked {
+    background: m.color($color);
+    border-color: m.color($color);
+  }
+
+  @include m.focus-ring;
+
+  &:disabled { @include m.disabled; }
+}
+
+@mixin radio-base($size: 1.125rem, $color: action-primary-default) {
+  @include check-base($size: $size, $r: full, $color: $color);
+}
+
+// ----------------------------------------------------------------------------
+// SWITCH (TOGGLE)
+// ----------------------------------------------------------------------------
+// A pill-shaped on/off control. Styles a raw `<input type="checkbox">`.
+// Usage: input[type="checkbox"].switch { @include switch-base; }
+@mixin switch-base(
+  $w: 2.5rem,
+  $h: 1.25rem,
+  $color: action-primary-default
+) {
+  appearance: none;
+  -webkit-appearance: none;
+  width: $w;
+  height: $h;
+  background: m.color(surface-muted);
+  border: 1px solid m.color(border-default);
+  border-radius: m.radius(full);
+  position: relative;
+  cursor: pointer;
+  @include m.transition(background-color, border-color);
+  @include m.focus-ring;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    width: calc(#{$h} - 4px);
+    height: calc(#{$h} - 4px);
+    border-radius: 50%;
+    background: m.color(surface-default);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+    @include m.transition(transform);
+  }
+
+  &:checked {
+    background: m.color($color);
+    border-color: m.color($color);
+  }
+  &:checked::before {
+    transform: translateX(calc(#{$w} - #{$h}));
+  }
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+// ----------------------------------------------------------------------------
+// SLIDER (RANGE INPUT)
+// ----------------------------------------------------------------------------
+// A tokenized wrapper for <input type="range">.
+// Tracks `appearance: none` quirks across browsers with vendor selectors.
+@mixin slider-base(
+  $track-h: 4px,
+  $thumb-size: 1.1rem,
+  $color: action-primary-default
+) {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 100%;
+  background: transparent;
+  @include m.focus-ring;
+
+  &::-webkit-slider-runnable-track {
+    height: $track-h;
+    background: m.color(surface-muted);
+    border-radius: m.radius(full);
+  }
+  &::-moz-range-track {
+    height: $track-h;
+    background: m.color(surface-muted);
+    border-radius: m.radius(full);
+    border: 0;
+  }
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: $thumb-size;
+    height: $thumb-size;
+    border-radius: 50%;
+    background: m.color($color);
+    border: 0;
+    margin-top: calc((#{$track-h} - #{$thumb-size}) / 2);
+    cursor: pointer;
+    @include m.transition(transform);
+  }
+  &::-moz-range-thumb {
+    width: $thumb-size;
+    height: $thumb-size;
+    border-radius: 50%;
+    background: m.color($color);
+    border: 0;
+    cursor: pointer;
+  }
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  &:disabled::-webkit-slider-thumb { cursor: not-allowed; }
+  &:disabled::-moz-range-thumb     { cursor: not-allowed; }
+}
+
+// ----------------------------------------------------------------------------
+// LABEL
+// ----------------------------------------------------------------------------
+// `$margin-bottom: null` emits no margin at all — the right default for a
+// `gap`-driven form layout, where a baked margin fights the container and has
+// to be overridden. Pass a scale step (or a raw length) to opt back in.
+@mixin label-base($size: 2, $weight: medium, $color: text-primary, $margin-bottom: null) {
+  display: block;
+  @include m.font($weight, $size);
+  color: m.color($color);
+  @if $margin-bottom {
+    margin-bottom: m.space($margin-bottom);
+  }
+}
+
+// ----------------------------------------------------------------------------
+// FORM LAYOUT
+// ----------------------------------------------------------------------------
+@mixin form-layout($columns: 1, $gap: 4) {
+  display: grid;
+  gap: m.space($gap);
+  @if $columns > 1 {
+    @include m.tablet {
+      grid-template-columns: repeat($columns, 1fr);
+    }
+  }
+}
+
+@mixin form-group($gap: 1, $direction: column) {
+  display: flex;
+  flex-direction: $direction;
+  gap: m.space($gap);
+}
+
+@mixin form-row($gap: 2, $align: center) {
+  display: flex;
+  align-items: $align;
+  gap: m.space($gap);
+}
+
+// ----------------------------------------------------------------------------
+// HELPER TEXT
+// ----------------------------------------------------------------------------
+@mixin form-help($color: text-muted, $margin-top: null) {
+  @include m.font(reg, 1);
+  color: m.color($color);
+  @if $margin-top {
+    margin-top: m.space($margin-top);
+  }
+}
+
+@mixin form-error {
+  @include form-help($color: error-text);
+}

package/scss/components/_index.scss

@@ -0,0 +1,17 @@
+// ============================================================================
+// COMPONENTS BARREL
+// ============================================================================
+// Import all or pick what you need:
+//   @use "css-is-awesome/scss/components";              → everything
+//   @use "css-is-awesome/scss/components/buttons" as b; → just buttons
+// ============================================================================
+@forward './buttons';
+@forward './forms';
+@forward './feedback';
+@forward './overlay';
+@forward './navigation';
+@forward './data';
+@forward './accordion';
+@forward './tabs';
+@forward './copy-button';
+@forward './stepper';

package/scss/components/_navigation.scss

@@ -0,0 +1,186 @@
+// ============================================================================
+// NAVIGATION — Navbar, Nav, Breadcrumb, Tabs, Pagination
+// ============================================================================
+@use 'sass:map';
+@use '../theme' as t;
+@use '../system' as s;
+@use '../mixins' as m;
+
+// ----------------------------------------------------------------------------
+// NAVBAR
+// ----------------------------------------------------------------------------
+// Usage:
+//   .navbar { @include navbar-base; }
+//   .navbar { @include navbar-base($bg: background-navbar, $sticky: true); }
+
+@mixin navbar-base(
+  $bg: background-navbar,
+  $py: 2,
+  $px: 4,
+  $shadow: 1,
+  $sticky: false,
+  $border: true
+) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: m.space($py) m.space($px);
+  background: m.color($bg);
+
+  @if $sticky {
+    position: sticky;
+    top: 0;
+    z-index: m.z(sticky);
+  }
+
+  @if $shadow != none {
+    box-shadow: m.shadow($shadow);
+  }
+
+  @if $border {
+    border-bottom: 1px solid m.color(border-default);
+  }
+}
+
+@mixin navbar-brand($gap: 2) {
+  display: flex;
+  align-items: center;
+  gap: m.space($gap);
+  text-decoration: none;
+  color: m.color(text-primary);
+  @include m.font(bold, 4);
+}
+
+@mixin navbar-nav($gap: 1) {
+  display: flex;
+  align-items: center;
+  gap: m.space($gap);
+  @include m.list-reset;
+}
+
+@mixin navbar-link($py: 1, $px: 2, $r: md) {
+  display: flex;
+  align-items: center;
+  gap: m.space(2xs);
+  padding: m.space($py) m.space($px);
+  border-radius: m.radius($r);
+  color: m.color(text-secondary);
+  text-decoration: none;
+  @include m.font(medium, 2);
+  @include m.transition(color, background-color);
+
+  &:hover {
+    color: m.color(text-primary);
+    background: m.color(interactive-hover);
+  }
+
+  &[aria-current="page"],
+  &.active {
+    color: m.color(text-link);
+    background: m.color(interactive-hover);
+  }
+}
+
+// ----------------------------------------------------------------------------
+// NAV (generic list navigation)
+// ----------------------------------------------------------------------------
+// `nav-link` was an alias for `navbar-link`; use `navbar-link` directly.
+@mixin nav-base($direction: row, $gap: 1) {
+  display: flex;
+  flex-direction: $direction;
+  gap: m.space($gap);
+  @include m.list-reset;
+}
+
+// ----------------------------------------------------------------------------
+// BREADCRUMB
+// ----------------------------------------------------------------------------
+@mixin breadcrumb($gap: 1, $separator: "/") {
+  display: flex;
+  align-items: center;
+  gap: m.space($gap);
+  @include m.list-reset;
+  @include m.font(reg, 2);
+
+  li + li::before {
+    content: $separator;
+    color: m.color(text-muted);
+    margin-right: m.space($gap);
+  }
+
+  a {
+    color: m.color(text-link);
+    text-decoration: none;
+
+    &:hover { text-decoration: underline; }
+  }
+
+  [aria-current="page"] {
+    color: m.color(text-muted);
+  }
+}
+
+// ----------------------------------------------------------------------------
+// TABS
+// ----------------------------------------------------------------------------
+@mixin tabs-base($gap: 0, $border: true) {
+  display: flex;
+  gap: m.space($gap);
+  @include m.list-reset;
+
+  @if $border {
+    border-bottom: 1px solid m.color(border-default);
+  }
+}
+
+@mixin tab-item($py: 2, $px: 4, $active-color: action-primary-default) {
+  padding: m.space($py) m.space($px);
+  color: m.color(text-secondary);
+  @include m.font(medium, 2);
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  @include m.transition(color, border-color);
+
+  &:hover { color: m.color(text-primary); }
+
+  &[aria-selected="true"],
+  &.active {
+    color: m.color($active-color);
+    border-bottom-color: m.color($active-color);
+  }
+}
+
+// ----------------------------------------------------------------------------
+// PAGINATION
+// ----------------------------------------------------------------------------
+@mixin pagination($gap: 2xs) {
+  display: flex;
+  align-items: center;
+  gap: m.space($gap);
+  @include m.list-reset;
+}
+
+@mixin pagination-item($size: 2.25rem, $r: md) {
+  @include m.flex($justify: center);
+  width: $size;
+  height: $size;
+  border-radius: m.radius($r);
+  @include m.font(medium, 2);
+  color: m.color(text-secondary);
+  text-decoration: none;
+  @include m.transition(background-color, color);
+
+  &:hover {
+    background: m.color(interactive-hover);
+    color: m.color(text-primary);
+  }
+
+  &[aria-current="page"],
+  &.active {
+    background: m.color(action-primary-default);
+    color: m.color(text-inverse);
+  }
+
+  &:disabled, &[disabled] { @include m.disabled; }
+}