css-tags 0.1.0

package/components/flex.css

@@ -0,0 +1,59 @@
+/**
+ * flex.css
+ *
+ * A declarative flexbox layout component.
+ * ------------------------------------------------------------------------------
+ * This component provides an intuitive way to create one-dimensional layouts
+ * using Flexbox, configured declaratively through HTML attributes.
+ *
+ * @feature {Flexbox} - For powerful and flexible one-dimensional layouts.
+ * @feature {CSS Custom Properties} - For clean and maintainable style definitions.
+ * @feature {attr()} - Powers the entire declarative API.
+ * @feature {CSS Nesting} - Co-locates child item styles for better organization.
+ */
+
+:is(flex, [data-flex], .flex) {
+  /* --- Core Flex Container Properties --- */
+  --flex-direction:   attr(direction type(*), row);
+  --flex-wrap:        attr(wrap type(*), nowrap);
+  --justify-content:  attr(justify type(*), flex-start);
+  --align-items:      attr(align type(*), stretch);
+  --gap:              attr(gap type(*), 1.5rem);
+
+  display: flex;
+  flex-direction: var(--flex-direction);
+  flex-wrap: var(--flex-wrap);
+  justify-content: var(--justify-content);
+  align-items: var(--align-items);
+  gap: var(--gap);
+
+  /*
+   * --- Flex Item Styling (applied to direct children) ---
+   * This uses the child combinator `>` to style any element placed
+   * directly inside the <flex> container.
+   */
+  & > * {
+    /* --- Individual Item Sizing and Ordering --- */
+    flex-grow:   attr(grow type(*), 0);
+    flex-shrink: attr(shrink type(*), 1);
+    flex-basis:  attr(basis type(*), auto);
+    order:       attr(order type(*), 0);
+
+    /* --- Individual Item Alignment --- */
+    align-self:  attr(align-self type(*), auto);
+  }
+
+  /*
+   * --- Theming Example ---
+   * A `theme="brand"` attribute could apply a pre-defined theme mixin.
+   * This demonstrates how components can integrate with the mixin library.
+   */
+  &[theme="brand"] {
+    /*
+      @apply --theme-colors(
+        --primary: var(--brand-blue),
+        --bg: var(--brand-surface)
+      );
+    */
+  }
+}

package/components/form-patterns.css

@@ -0,0 +1,273 @@
+/** Native-first compound form patterns. */
+
+input[type="checkbox"][role="switch"] {
+  --_switch-width: var(--switch-width, 2.75rem);
+  --_switch-height: var(--switch-height, 1.5rem);
+  --_switch-padding: var(--switch-padding, 0.1875rem);
+  --_switch-thumb: calc(var(--_switch-height) - (2 * var(--_switch-padding)));
+
+  appearance: none;
+  box-sizing: border-box;
+  display: inline-grid;
+  align-items: center;
+  inline-size: var(--_switch-width);
+  block-size: var(--_switch-height);
+  padding: var(--_switch-padding);
+  margin: 0;
+  border: var(--switch-border-width, var(--border-width, 1px)) solid
+    var(--switch-border-color, var(--outline-overt));
+  border-radius: var(--switch-radius, var(--radius-full, 9999px));
+  background: var(--switch-background, var(--surface-overt));
+  cursor: pointer;
+  transition: background-color 160ms ease-out, border-color 160ms ease-out;
+}
+
+input[type="checkbox"][role="switch"]::before {
+  content: "";
+  inline-size: var(--_switch-thumb);
+  block-size: var(--_switch-thumb);
+  border-radius: 50%;
+  background: var(--switch-thumb-background, var(--surface-default));
+  box-shadow: var(--switch-thumb-shadow, var(--shadow-sm));
+  transform: translateX(0);
+  transition: transform 160ms ease-out;
+}
+
+input[type="checkbox"][role="switch"]:checked {
+  border-color: var(--switch-checked-border-color, var(--accent));
+  background: var(--switch-checked-background, var(--accent));
+}
+
+input[type="checkbox"][role="switch"]:checked::before {
+  transform: translateX(calc(var(--_switch-width) - var(--_switch-thumb) - (2 * var(--_switch-padding)) - (2 * var(--switch-border-width, var(--border-width, 1px)))));
+}
+
+input[type="checkbox"][role="switch"]:focus-visible {
+  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset, 2px);
+}
+
+input[type="checkbox"][role="switch"]:disabled {
+  opacity: var(--opacity-disabled, 0.5);
+  cursor: not-allowed;
+}
+
+:is(input-group, [data-input-group], .input-group) {
+  display: flex;
+  align-items: stretch;
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+
+:is(input-group, [data-input-group], .input-group) > * {
+  min-inline-size: 0;
+  margin: 0;
+  border-radius: 0;
+}
+
+:is(input-group, [data-input-group], .input-group) > :first-child {
+  border-start-start-radius: var(--input-group-radius, var(--radius-md, 0.5rem));
+  border-end-start-radius: var(--input-group-radius, var(--radius-md, 0.5rem));
+}
+
+:is(input-group, [data-input-group], .input-group) > :last-child {
+  border-start-end-radius: var(--input-group-radius, var(--radius-md, 0.5rem));
+  border-end-end-radius: var(--input-group-radius, var(--radius-md, 0.5rem));
+}
+
+:is(input-group, [data-input-group], .input-group) > :not(:first-child) {
+  margin-inline-start: calc(-1 * var(--input-group-border-overlap, var(--border-width, 1px)));
+}
+
+:is(input-group, [data-input-group], .input-group) > :is(input, select, textarea) {
+  flex: 1 1 auto;
+}
+
+:is([data-input-affix], .input-affix) {
+  display: inline-flex;
+  align-items: center;
+  padding-inline: var(--input-affix-padding-inline, var(--space-sm, 0.75rem));
+  border: var(--border-width, 1px) solid var(--form-control-border-color, var(--outline-default));
+  background: var(--input-affix-background, var(--surface-subtle));
+  color: var(--input-affix-color, var(--text-subtle));
+  white-space: nowrap;
+}
+
+:is(input-group, [data-input-group], .input-group):focus-within {
+  position: relative;
+  z-index: 1;
+}
+
+@media (max-width: 30rem) {
+  :is(input-group, [data-input-group], .input-group)[data-stack="auto"] {
+    flex-direction: column;
+  }
+
+  :is(input-group, [data-input-group], .input-group)[data-stack="auto"] > * {
+    margin: 0 0 calc(-1 * var(--input-group-border-overlap, var(--border-width, 1px)));
+    border-radius: 0;
+  }
+
+  :is(input-group, [data-input-group], .input-group)[data-stack="auto"] > :first-child {
+    border-start-start-radius: var(--input-group-radius, var(--radius-md, 0.5rem));
+    border-start-end-radius: var(--input-group-radius, var(--radius-md, 0.5rem));
+  }
+
+  :is(input-group, [data-input-group], .input-group)[data-stack="auto"] > :last-child {
+    margin-block-end: 0;
+    border-end-start-radius: var(--input-group-radius, var(--radius-md, 0.5rem));
+    border-end-end-radius: var(--input-group-radius, var(--radius-md, 0.5rem));
+  }
+}
+
+:is(search-input, [data-search-input], .search-input) {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  inline-size: 100%;
+  gap: var(--search-input-gap, var(--space-sm, 0.5rem));
+  padding-inline: var(--search-input-padding-inline, var(--space-sm, 0.75rem));
+  border: var(--search-input-border-width, var(--border-width, 1px)) solid
+    var(--search-input-border-color, var(--outline-default));
+  border-radius: var(--search-input-radius, var(--radius-md, 0.5rem));
+  background: var(--search-input-background, var(--surface-default));
+  color: var(--search-input-color, var(--text-default));
+}
+
+:is(search-input, [data-search-input], .search-input) > input[type="search"] {
+  inline-size: 100%;
+  min-inline-size: 0;
+  padding: var(--search-input-padding-block, var(--space-sm, 0.625rem)) 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+}
+
+:is(search-input, [data-search-input], .search-input):focus-within {
+  border-color: var(--outline-focus);
+  box-shadow: 0 0 0 var(--focus-ring-width, 2px) var(--focus-ring-color);
+}
+
+:is(search-input, [data-search-input], .search-input) > :is(svg, [data-search-icon]) {
+  inline-size: var(--search-input-icon-size, 1.125rem);
+  block-size: var(--search-input-icon-size, 1.125rem);
+  color: var(--search-input-icon-color, var(--text-muted));
+}
+
+:is(file-dropzone, [data-file-dropzone], .file-dropzone) {
+  position: relative;
+  display: grid;
+  place-items: center;
+  gap: var(--dropzone-gap, var(--space-sm, 0.5rem));
+  min-block-size: var(--dropzone-min-height, 10rem);
+  padding: var(--dropzone-padding, var(--space-xl, 2rem));
+  border: var(--dropzone-border-width, 2px) dashed
+    var(--dropzone-border-color, var(--outline-default));
+  border-radius: var(--dropzone-radius, var(--radius-lg, 0.75rem));
+  background: var(--dropzone-background, var(--surface-subtle));
+  color: var(--dropzone-color, var(--text-default));
+  text-align: center;
+}
+
+:is(file-dropzone, [data-file-dropzone], .file-dropzone) > input[type="file"] {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+
+:is(file-dropzone, [data-file-dropzone], .file-dropzone):is(:hover, :focus-within, [data-dragover="true"]) {
+  border-color: var(--dropzone-active-border-color, var(--accent));
+  background: var(--dropzone-active-background, var(--accent-subtle));
+}
+
+:is(file-dropzone, [data-file-dropzone], .file-dropzone):focus-within {
+  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset, 2px);
+}
+
+:is(rating-output, [data-rating-output], .rating-output) {
+  --_rating: var(--rating-value, 0%);
+  --_rating-empty: var(--rating-empty-color, var(--surface-overt));
+  --_rating-fill: var(--rating-fill-color, var(--warning));
+
+  display: inline-block;
+  inline-size: max-content;
+  color: transparent;
+  font-size: var(--rating-size, 1.25rem);
+  line-height: 1;
+  letter-spacing: var(--rating-gap, 0.125em);
+  background: linear-gradient(90deg, var(--_rating-fill) var(--_rating), var(--_rating-empty) var(--_rating));
+  background-clip: text;
+}
+
+:is(rating-input, [data-rating-input], .rating-input) {
+  display: inline-flex;
+  flex-direction: row;
+  direction: rtl;
+  inline-size: max-content;
+  padding: 0;
+  border: 0;
+}
+
+:is(rating-input, [data-rating-input], .rating-input) > label {
+  color: var(--rating-empty-color, var(--surface-overt));
+  font-size: var(--rating-size, 1.5rem);
+  line-height: 1;
+  cursor: pointer;
+}
+
+:is(rating-input, [data-rating-input], .rating-input) input {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  opacity: 0;
+}
+
+:is(rating-input, [data-rating-input], .rating-input) > label:has(input:checked),
+:is(rating-input, [data-rating-input], .rating-input) > label:has(input:checked) ~ label,
+:is(rating-input, [data-rating-input], .rating-input) > label:hover,
+:is(rating-input, [data-rating-input], .rating-input) > label:hover ~ label {
+  color: var(--rating-fill-color, var(--warning));
+}
+
+:is(rating-input, [data-rating-input], .rating-input) > label:has(input:focus-visible) {
+  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset, 2px);
+}
+
+:is(reaction-select, [data-reaction-select], .reaction-select) {
+  display: inline-flex;
+}
+
+:is(reaction-select, [data-reaction-select], .reaction-select) > select {
+  min-inline-size: var(--reaction-select-min-width, 8rem);
+}
+
+@supports (appearance: base-select) {
+  :is(reaction-select, [data-reaction-select], .reaction-select) > select,
+  :is(reaction-select, [data-reaction-select], .reaction-select) > select::picker(select) {
+    appearance: base-select;
+  }
+
+  :is(reaction-select, [data-reaction-select], .reaction-select) option {
+    padding: var(--reaction-option-padding, var(--space-sm, 0.75rem));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  input[type="checkbox"][role="switch"],
+  input[type="checkbox"][role="switch"]::before {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  input[type="checkbox"][role="switch"]:checked {
+    background: Highlight;
+  }
+}

package/components/form.css

@@ -0,0 +1,130 @@
+/**
+ * form.css
+ *
+ * Explicit class hooks for native form controls. Classes are placed directly
+ * on the semantic element so the public API works without scope-root quirks.
+ */
+
+:is(.form-input, .form-button, .form-select, .form-textarea) {
+  box-sizing: border-box;
+  font-family: var(--font-family-ui, inherit);
+  font-size: var(--font-size-control, var(--font-size-base, 1rem));
+  font-weight: var(--form-control-weight, var(--font-weight-normal, 400));
+  line-height: var(--line-height-control, var(--line-height-normal, 1.5));
+}
+
+:is(.form-input, .form-select, .form-textarea) {
+  display: block;
+  inline-size: 100%;
+  padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
+  border: var(--border-width, 1px) solid var(--form-control-border-color, var(--outline-default, var(--outline, currentColor)));
+  border-radius: var(--radius-md, 6px);
+  background: var(--form-control-background, var(--surface-default));
+  color: var(--form-control-color, var(--text-default));
+  transition: border-color 150ms ease-out, box-shadow 150ms ease-out, background-color 150ms ease-out;
+}
+
+:where(.form-field, label:has(> :is(.form-input, .form-select, .form-textarea))) {
+  display: grid;
+  inline-size: 100%;
+  gap: var(--form-field-gap, var(--space-xs, 0.5rem));
+  color: var(--form-label-color, var(--text-overt, var(--text-default)));
+  font-weight: var(--form-label-weight, var(--font-weight-medium, 500));
+}
+
+:where(.form-field, label:has(> :is(.form-input, .form-select, .form-textarea))) > :is(small, .form-help) {
+  color: var(--text-muted);
+  font-weight: var(--font-weight-normal, 400);
+}
+
+.form-input::placeholder,
+.form-textarea::placeholder {
+  color: var(--text-muted);
+  opacity: 1;
+}
+
+:is(.form-input, .form-select, .form-textarea):hover:not(:disabled, :focus) {
+  border-color: var(--outline-overt);
+}
+
+:is(.form-input, .form-select, .form-textarea):focus-visible {
+  border-color: var(--outline-focus);
+  outline: none;
+  box-shadow: 0 0 0 var(--focus-ring-width, 2px) var(--focus-ring-color);
+}
+
+.form-select {
+  cursor: pointer;
+}
+
+/* `appearance: base-select` turns the control into a customizable button.
+ * Preserve the inline selected-content/picker-icon arrangement instead of
+ * inheriting the generic block layout used by text fields. */
+@supports (appearance: base-select) {
+  .form-select {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .form-select::picker-icon {
+    flex: 0 0 auto;
+    margin-inline-start: var(--form-select-icon-gap, var(--space-xs, 0.5rem));
+  }
+}
+
+.form-textarea {
+  min-block-size: 6rem;
+  resize: vertical;
+}
+
+.form-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: auto;
+  padding: var(--spacing-sm, 0.5rem) var(--spacing-lg, 1.5rem);
+  border: var(--form-button-border, 0);
+  border-radius: var(--radius-md, 6px);
+  background: var(--bg, var(--accent));
+  color: var(--fg, var(--text-on-accent, white));
+  font-weight: var(--font-weight-medium, 500);
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color 150ms ease-out, transform 100ms ease-out, box-shadow 150ms ease-out;
+}
+
+.form-button:hover:not(:disabled) {
+  background: var(--form-button-hover-background, oklch(from var(--bg, var(--accent)) calc(l - 0.08) c h));
+}
+
+.form-button:active:not(:disabled) {
+  transform: scale(0.98);
+  background: var(--form-button-active-background, oklch(from var(--bg, var(--accent)) calc(l - 0.14) c h));
+}
+
+.form-button:focus-visible {
+  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset, 2px);
+}
+
+:is(.form-input, .form-select, .form-textarea, .form-button):disabled {
+  opacity: var(--opacity-disabled, 0.5);
+  cursor: not-allowed;
+}
+
+/* Button color variants */
+.btn-primary { --bg: var(--accent); --fg: var(--text-on-accent); }
+.btn-secondary { --bg: var(--secondary); --fg: var(--text-on-secondary); }
+.btn-success { --bg: var(--success); --fg: var(--text-on-success); }
+.btn-warning { --bg: var(--warning); --fg: var(--text-on-warning); }
+.btn-error { --bg: var(--error); --fg: var(--text-on-error); }
+
+/* Visual state follows semantic state when available. */
+:is(.form-input, .form-select, .form-textarea):is(.input-error, [aria-invalid="true"]) {
+  border-color: var(--outline-error, var(--error));
+}
+
+:is(.form-input, .form-select, .form-textarea).input-success {
+  border-color: var(--outline-success, var(--success));
+}

package/components/grid.css

@@ -0,0 +1,82 @@
+/**
+ * grid.css
+ *
+ * A declarative, powerful, and comprehensive CSS grid system.
+ * ------------------------------------------------------------------------------
+ * @feature {CSS Grid} - With declarative areas, tracks, and placement.
+ * @feature {CSS Gap Decorations} (Experimental) - For styling grid lines.
+ * @feature {attr()} - Powers the entire declarative API.
+ * @feature {Subgrid} - Allows nested grids to align with the parent grid.
+ */
+
+:is(grid, [data-grid], .grid) {
+  /* --- Core Grid Layout & Template Properties --- */
+  --grid-display: attr(display type(*), grid);
+  --grid-columns: attr(columns type(*), none);
+  --grid-rows:    attr(rows type(*), none);
+  --grid-areas:   attr(areas type(*), none);
+  --grid-gap:     attr(gap type(*), 1.5rem);
+  --grid-flow-tolerance: attr(flow-tolerance type(*), 1em);
+
+  display: grid;
+  display: var(--grid-display);
+  grid-template-columns: var(--grid-columns);
+  grid-template-rows: var(--grid-rows);
+  grid-template-areas: var(--grid-areas);
+  gap: var(--grid-gap);
+
+  /* --- Grid-wide Item Alignment --- */
+  justify-items: attr(justify-items type(*), stretch);
+  align-items:   attr(align-items type(*), stretch);
+
+  /* --- CSS Gap Decoration Properties (Experimental) --- */
+  column-rule-width:  attr(col-rule-width type(*), none);
+  column-rule-style:  attr(col-rule-style type(*), none);
+  column-rule-color:  attr(col-rule-color type(*), currentColor);
+  row-rule-width:     attr(row-rule-width type(*), none);
+  row-rule-style:     attr(row-rule-style type(*), none);
+  row-rule-color:     attr(row-rule-color type(*), currentColor);
+}
+
+:is(grid, [data-grid], .grid):is([lanes], [data-lanes]) {
+  /* Unsupported browsers retain the normal grid layout. */
+  display: grid;
+}
+
+@supports (display: grid-lanes) {
+  :is(grid, [data-grid], .grid):is([lanes], [data-lanes]) {
+    display: grid-lanes;
+    flow-tolerance: var(--grid-flow-tolerance);
+  }
+}
+
+/* Target any direct child of <grid> for maximum flexibility */
+:is(grid, [data-grid], .grid) > * {
+  /* --- Item Placement Properties --- */
+  grid-area:    attr(area type(*), auto);
+  grid-column:  attr(col type(*), auto);
+  grid-row:     attr(row type(*), auto);
+
+  /* --- Individual Item Self-Alignment --- */
+  justify-self: attr(justify-self type(*), auto);
+  align-self:   attr(align-self type(*), auto);
+
+  /* --- Subgrid Capability --- */
+  &[subgrid] {
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-template-rows: subgrid;
+    gap: 0; /* Gaps are inherited from parent grid */
+  }
+}
+
+/* Named line placement when shorthand col/row are not provided */
+:is(grid, [data-grid], .grid) > *:not([col]) {
+  grid-column-start: attr(col-start type(*), auto);
+  grid-column-end: attr(col-end type(*), auto);
+}
+
+:is(grid, [data-grid], .grid) > *:not([row]) {
+  grid-row-start: attr(row-start type(*), auto);
+  grid-row-end: attr(row-end type(*), auto);
+}

package/components/identity.css

@@ -0,0 +1,59 @@
+/** Identity primitives. */
+
+:is(user-avatar, [data-avatar], .avatar) {
+  --_avatar-size: var(--avatar-size, 2.75rem);
+
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  flex: 0 0 auto;
+  inline-size: var(--_avatar-size);
+  block-size: var(--_avatar-size);
+  overflow: hidden;
+  border: var(--avatar-border-width, var(--border-width, 1px)) solid
+    var(--avatar-border-color, var(--outline-subtle));
+  border-radius: var(--avatar-radius, var(--radius-full, 9999px));
+  background: var(--avatar-background, var(--surface-overt));
+  color: var(--avatar-color, var(--text-overt));
+  font-size: calc(var(--_avatar-size) * 0.36);
+  font-weight: var(--avatar-font-weight, var(--font-weight-semibold, 600));
+  line-height: 1;
+  text-transform: uppercase;
+  isolation: isolate;
+}
+
+:is(user-avatar, [data-avatar], .avatar) > :is(img, picture) {
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: var(--avatar-image-fit, cover);
+}
+
+:is(user-avatar, [data-avatar], .avatar):is([size="sm"], [data-size="sm"]) {
+  --avatar-size: 2rem;
+}
+
+:is(user-avatar, [data-avatar], .avatar):is([size="lg"], [data-size="lg"]) {
+  --avatar-size: 4rem;
+}
+
+:is(user-avatar, [data-avatar], .avatar):is([shape="square"], [data-shape="square"]) {
+  --avatar-radius: var(--radius-md, 0.5rem);
+}
+
+:is(avatar-group, [data-avatar-group], .avatar-group) {
+  display: flex;
+  align-items: center;
+  inline-size: max-content;
+  padding-inline-start: var(--avatar-group-overlap, 0.625rem);
+}
+
+:is(avatar-group, [data-avatar-group], .avatar-group)
+  > :is(user-avatar, [data-avatar], .avatar) {
+  margin-inline-start: calc(-1 * var(--avatar-group-overlap, 0.625rem));
+  box-shadow: 0 0 0 var(--avatar-group-ring-width, 2px)
+    var(--avatar-group-ring-color, var(--surface-default));
+}
+