@profpowell/vb-design-system 0.1.0

package/dist/vb-design-system.css

@@ -0,0 +1,993 @@
+/* src/web-components/color-palette/styles.css */
+color-palette:not(:defined) {
+  display: block;
+}
+color-palette {
+  display: block;
+}
+color-palette .palette {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--size-xs, 0.5rem);
+}
+color-palette .palette.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+}
+color-palette .palette.list {
+  flex-direction: column;
+}
+color-palette .palette.list .swatch-wrap {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--size-s, 0.75rem);
+}
+color-palette .palette.list .color-box {
+  inline-size: 36px !important;
+  block-size: 36px !important;
+}
+color-palette .swatch-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--size-2xs, 0.25rem);
+}
+color-palette .color-box {
+  position: relative;
+  border: 1px solid oklch(0% 0 0 / 0.15);
+  border-radius: var(--radius-s, 0.25rem);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  font-family: var(--font-mono, monospace);
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+  overflow: hidden;
+}
+color-palette .color-box:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px oklch(0% 0 0 / 0.15);
+  z-index: 1;
+}
+color-palette .color-box:focus-visible {
+  outline: 2px solid var(--color-focus-ring, currentColor);
+  outline-offset: 2px;
+}
+color-palette .color-value {
+  font-size: 0.625rem;
+  line-height: 1.2;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  text-align: center;
+  padding: 2px 4px;
+  word-break: break-all;
+}
+color-palette .color-box:hover .color-value,
+color-palette .color-box:focus-visible .color-value,
+color-palette .color-value.visible {
+  opacity: 1;
+}
+color-palette .color-box.copied::after {
+  content: "Copied!";
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: oklch(0% 0 0 / 0.6);
+  color: white;
+  font-size: var(--font-size-xs, 0.75rem);
+  font-weight: 600;
+  font-family: var(--font-sans, system-ui);
+  border-radius: inherit;
+}
+color-palette .color-name {
+  font-size: var(--font-size-xs, 0.75rem);
+  color: var(--color-text-muted, #666);
+  text-align: center;
+  max-inline-size: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* src/web-components/palette-generator/styles.css */
+palette-generator {
+  display: block;
+}
+palette-generator .pg-seed-label {
+  display: block;
+  font-size: var(--font-size-sm, 0.875rem);
+  font-weight: 600;
+  color: var(--color-text-muted, #666);
+  margin-block-end: var(--size-2xs, 0.25rem);
+}
+palette-generator > color-picker,
+palette-generator > input[type=color] {
+  margin-block-end: var(--size-s, 0.75rem);
+  padding-block-end: var(--size-s, 0.75rem);
+  border-block-end: 1px solid var(--color-border-subtle, #e5e5e5);
+}
+palette-generator .pg-export {
+  margin-block-start: var(--size-s, 0.75rem);
+}
+palette-generator .pg-export button:hover {
+  background: var(--surface-hover, #f5f5f5);
+}
+palette-generator .pg-export button:focus-visible {
+  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, currentColor);
+  outline-offset: 2px;
+}
+
+/* src/web-components/type-specimen/styles.css */
+type-specimen:not(:defined) {
+  display: block;
+}
+type-specimen {
+  display: block;
+}
+type-specimen .specimen-header {
+  margin-block-end: var(--size-s, 0.75rem);
+}
+type-specimen .specimen-label {
+  display: block;
+  font-size: var(--font-size-xs, 0.75rem);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--color-text-muted, #666);
+  margin-block-end: var(--size-2xs, 0.25rem);
+  font-family: var(--font-sans, system-ui);
+}
+type-specimen .specimen-sample {
+  font-size: var(--font-size-3xl, 1.875rem);
+  line-height: 1.2;
+  margin: 0;
+  padding: var(--size-xs, 0.5rem);
+  border: 1px dashed transparent;
+  border-radius: var(--radius-s, 0.25rem);
+  transition: border-color 0.15s ease;
+  cursor: text;
+}
+type-specimen .specimen-sample:hover {
+  border-color: var(--color-border, #ddd);
+}
+type-specimen .specimen-sample:focus {
+  outline: none;
+  border-color: var(--color-primary, #333);
+}
+type-specimen .specimen-chars {
+  display: flex;
+  flex-direction: column;
+  gap: var(--size-2xs, 0.25rem);
+  margin-block-end: var(--size-s, 0.75rem);
+  padding: var(--size-xs, 0.5rem);
+  background: var(--color-surface-raised, #f8f8f8);
+  border-radius: var(--radius-s, 0.25rem);
+}
+type-specimen .char-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px;
+  align-items: center;
+  font-size: var(--font-size-sm, 0.875rem);
+}
+type-specimen .char-label {
+  font-family: var(--font-sans, system-ui);
+  font-size: var(--font-size-xs, 0.75rem);
+  font-weight: 600;
+  color: var(--color-text-muted, #666);
+  inline-size: 3.5rem;
+  flex-shrink: 0;
+}
+type-specimen .char-row span:not(.char-label) {
+  inline-size: 1.25em;
+  text-align: center;
+}
+type-specimen .specimen-weights {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--size-s, 0.75rem);
+  margin-block-end: var(--size-s, 0.75rem);
+}
+type-specimen .weight-sample {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+}
+type-specimen .weight-label {
+  font-family: var(--font-mono, monospace);
+  font-size: var(--font-size-xs, 0.75rem);
+  color: var(--color-text-muted, #666);
+}
+type-specimen .weight-text {
+  font-size: var(--font-size-2xl, 1.5rem);
+}
+type-specimen .specimen-scale {
+  display: flex;
+  flex-direction: column;
+  gap: var(--size-2xs, 0.25rem);
+}
+type-specimen .scale-step {
+  display: flex;
+  align-items: baseline;
+  gap: var(--size-s, 0.75rem);
+  line-height: 1.3;
+}
+type-specimen .scale-label {
+  font-family: var(--font-mono, monospace);
+  font-size: var(--font-size-xs, 0.75rem);
+  color: var(--color-text-muted, #666);
+  inline-size: 2.5rem;
+  flex-shrink: 0;
+  text-align: end;
+}
+type-specimen .scale-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* src/web-components/spacing-specimen/styles.css */
+spacing-specimen:not(:defined) {
+  display: block;
+}
+spacing-specimen {
+  display: block;
+}
+spacing-specimen .specimen-label {
+  display: block;
+  font-size: var(--font-size-xs, 0.75rem);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--color-text-muted, #666);
+  margin-block-end: var(--size-s, 0.75rem);
+  font-family: var(--font-sans, system-ui);
+}
+spacing-specimen .specimen-scale {
+  display: flex;
+  flex-direction: column;
+  gap: var(--size-2xs, 0.25rem);
+}
+spacing-specimen .scale-step {
+  display: grid;
+  grid-template-columns: 3rem 1fr auto;
+  align-items: center;
+  gap: var(--size-s, 0.75rem);
+  min-block-size: 1.75rem;
+}
+spacing-specimen .scale-name {
+  font-family: var(--font-mono, monospace);
+  font-size: var(--font-size-sm, 0.875rem);
+  color: var(--color-text-muted, #666);
+  text-align: end;
+}
+spacing-specimen .scale-bar {
+  display: block;
+  block-size: var(--size-m, 1rem);
+  min-inline-size: 2px;
+  background: var(--color-interactive, oklch(55% 0.2 260));
+  border-radius: var(--radius-s, 0.25rem);
+  transition: inline-size 0.3s ease;
+}
+spacing-specimen .scale-value {
+  font-family: var(--font-mono, monospace);
+  font-size: var(--font-size-xs, 0.75rem);
+  color: var(--color-text-muted, #666);
+  font-variant-numeric: tabular-nums;
+  min-inline-size: 3.5rem;
+  text-align: end;
+}
+
+/* src/web-components/token-specimen/styles.css */
+token-specimen:not(:defined) {
+  display: block;
+  min-height: 2rem;
+}
+token-specimen {
+  display: block;
+}
+
+/* src/web-components/component-sampler/styles.css */
+component-sampler:not(:defined) {
+  display: block;
+}
+component-sampler {
+  display: block;
+}
+
+/* src/web-components/semantic-palette/styles.css */
+semantic-palette[data-upgraded] > dl,
+semantic-palette[data-upgraded] > ul,
+semantic-palette[data-upgraded] > ol {
+  display: none;
+}
+semantic-palette .sp-export button:hover {
+  background: var(--color-surface-hover, var(--color-surface-raised, #f5f5f5));
+}
+semantic-palette .sp-export button:focus-visible {
+  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, currentColor);
+  outline-offset: 2px;
+}
+
+/* src/web-components/motion-specimen/styles.css */
+@keyframes ms-slide {
+  from {
+    inset-inline-start: 0;
+  }
+  to {
+    inset-inline-start: calc(100% - 1rem);
+  }
+}
+@keyframes ms-fill {
+  0% {
+    transform: scaleX(0);
+  }
+  60% {
+    transform: scaleX(1);
+  }
+  100% {
+    transform: scaleX(1);
+    opacity: 0.3;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  motion-specimen .ms-dot {
+    animation: none !important;
+    inset-inline-start: calc(50% - 0.5rem) !important;
+  }
+  motion-specimen .ms-bar-fill {
+    animation: none !important;
+    transform: scaleX(0.6) !important;
+    opacity: 0.6 !important;
+  }
+}
+
+/* src/web-components/accessibility-specimen/styles.css */
+accessibility-specimen {
+  display: block;
+  font: inherit;
+}
+accessibility-specimen .as-contrast-table {
+  inline-size: 100%;
+  border-collapse: collapse;
+  border: var(--border-width-thin, 1px) solid var(--color-border, #ddd);
+  border-radius: var(--radius-m, 0.5rem);
+  overflow: hidden;
+  font-size: 0.95em;
+}
+accessibility-specimen .as-contrast-table th,
+accessibility-specimen .as-contrast-table td {
+  padding-block: var(--size-2xs, 0.375rem);
+  padding-inline: var(--size-s, 0.5rem);
+  text-align: start;
+  border-block-end: var(--border-width-thin, 1px) solid var(--color-border, #ddd);
+}
+accessibility-specimen .as-contrast-table tr:last-child th,
+accessibility-specimen .as-contrast-table tr:last-child td {
+  border-block-end: none;
+}
+accessibility-specimen .as-contrast-table thead {
+  background: var(--color-surface-raised, var(--color-surface, #fff));
+  font-size: 0.85em;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--color-text-muted, currentColor);
+}
+accessibility-specimen .as-pair-label {
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: var(--size-2xs, 0.375rem);
+  font-variant-numeric: tabular-nums;
+}
+accessibility-specimen .as-swatch {
+  display: inline-block;
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
+  border-radius: var(--radius-s, 0.25rem);
+  border: var(--border-width-thin, 1px) solid currentColor;
+  flex-shrink: 0;
+}
+accessibility-specimen .as-pair-sample {
+  font-weight: 500;
+  font-size: 1em;
+  white-space: nowrap;
+  text-align: center;
+}
+accessibility-specimen .as-pair-ratio {
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+}
+accessibility-specimen .as-badge {
+  text-align: center;
+  font-weight: 600;
+  font-size: 1.1em;
+  inline-size: 3em;
+}
+accessibility-specimen .as-pass {
+  color: var(--color-success, #2e7d32);
+}
+accessibility-specimen .as-fail {
+  color: var(--color-error, #c62828);
+}
+accessibility-specimen .as-empty {
+  text-align: center;
+  font-style: italic;
+  color: var(--color-text-muted, currentColor);
+  padding-block: var(--size-l, 1.5rem) !important;
+}
+accessibility-specimen .as-checklist {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--size-2xs, 0.375rem);
+}
+accessibility-specimen .as-checklist > li {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--size-xs, 0.5rem);
+  padding-block: var(--size-2xs, 0.375rem);
+  padding-inline: var(--size-s, 0.5rem);
+  border: var(--border-width-thin, 1px) solid var(--color-border, #ddd);
+  border-radius: var(--radius-s, 0.25rem);
+}
+accessibility-specimen .as-checklist-icon {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  border-radius: var(--radius-full, 999px);
+  font-weight: 700;
+  line-height: 1;
+}
+accessibility-specimen .as-status-pass {
+  border-color: var(--color-success, #2e7d32);
+}
+accessibility-specimen .as-status-pass .as-checklist-icon {
+  background: var(--color-success, #2e7d32);
+  color: var(--color-text-on-success, white);
+}
+accessibility-specimen .as-status-fail {
+  border-color: var(--color-error, #c62828);
+}
+accessibility-specimen .as-status-fail .as-checklist-icon {
+  background: var(--color-error, #c62828);
+  color: var(--color-text-on-error, white);
+}
+accessibility-specimen .as-status-warn {
+  border-color: var(--color-warning, #b8860b);
+}
+accessibility-specimen .as-status-warn .as-checklist-icon {
+  background: var(--color-warning, #b8860b);
+  color: var(--color-text-on-warning, white);
+}
+accessibility-specimen .as-status-na .as-checklist-icon {
+  background: var(--color-text-muted, oklch(60% 0 0));
+  color: var(--color-surface, white);
+}
+accessibility-specimen .as-sr-only {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* src/web-components/breakpoint-specimen/styles.css */
+breakpoint-specimen:not(:defined) {
+  display: block;
+}
+breakpoint-specimen {
+  display: block;
+  font-family: var(--font-sans, system-ui);
+  color: var(--color-text, #1a1a1a);
+}
+@scope (breakpoint-specimen) {
+  .bps-label {
+    display: block;
+    font-size: var(--font-size-xs, 0.75rem);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--color-text-muted, #666);
+    margin-block-end: var(--size-s, 0.75rem);
+  }
+  .bps-readout {
+    display: inline-flex;
+    align-items: baseline;
+    gap: var(--size-s, 0.75rem);
+    font-family: var(--font-mono, ui-monospace, monospace);
+    font-variant-numeric: tabular-nums;
+    margin-block-end: var(--size-m, 1rem);
+  }
+  .bps-width {
+    font-size: var(--font-size-l, 1.25rem);
+    font-weight: 600;
+  }
+  .bps-active {
+    font-size: var(--font-size-sm, 0.875rem);
+    padding: var(--size-3xs, 0.125rem) var(--size-xs, 0.5rem);
+    border-radius: var(--radius-s, 0.25rem);
+    background: var(--color-surface-raised, oklch(96% 0 0));
+    color: var(--color-text-muted, #666);
+    border: 1px solid var(--color-border, oklch(85% 0 0));
+  }
+  .bps-active[data-active]:not([data-active=""]) {
+    background: var(--color-accent-soft, oklch(94% 0.04 260));
+    color: var(--color-accent, oklch(45% 0.18 260));
+    border-color: currentColor;
+  }
+  .bps-ruler {
+    position: relative;
+    block-size: var(--size-xl, 2.5rem);
+    margin: var(--size-s, 0.75rem) 0 var(--size-l, 1.5rem);
+    border-block-start: 2px solid var(--color-border, oklch(85% 0 0));
+  }
+  .bps-cursor {
+    position: absolute;
+    inset-block: -0.5rem auto;
+    inline-size: 2px;
+    block-size: calc(100% + 1rem);
+    background: var(--color-accent, oklch(45% 0.18 260));
+    inset-inline-start: var(--bps-pos, 0%);
+    transform: translateX(-1px);
+    transition: inset-inline-start 0.12s linear;
+    z-index: 1;
+  }
+  .bps-stop {
+    position: absolute;
+    inset-block-start: -2px;
+    inset-inline-start: var(--bps-pos, 0%);
+    display: block;
+  }
+  .bps-tick {
+    display: block;
+    inline-size: 1px;
+    block-size: var(--size-xs, 0.5rem);
+    background: var(--color-text-muted, #666);
+  }
+  .bps-stop-label {
+    position: absolute;
+    inset-block-start: var(--size-s, 0.75rem);
+    inset-inline-start: 0;
+    transform: translateX(-50%);
+    font-family: var(--font-mono, ui-monospace, monospace);
+    font-size: var(--font-size-xs, 0.75rem);
+    color: var(--color-text-muted, #666);
+    text-align: center;
+    white-space: nowrap;
+    line-height: 1.2;
+  }
+  .bps-stop[data-current] .bps-stop-label {
+    color: var(--color-accent, oklch(45% 0.18 260));
+    font-weight: 600;
+  }
+  .bps-stop[data-current] .bps-tick {
+    background: var(--color-accent, oklch(45% 0.18 260));
+    inline-size: 2px;
+  }
+  .bps-list {
+    display: grid;
+    grid-template-columns: max-content 1fr;
+    gap: var(--size-2xs, 0.25rem) var(--size-m, 1rem);
+    margin: 0;
+    font-size: var(--font-size-sm, 0.875rem);
+  }
+  .bps-row {
+    display: contents;
+  }
+  .bps-row dt {
+    font-family: var(--font-mono, ui-monospace, monospace);
+    font-weight: 600;
+    color: var(--color-text-muted, #666);
+  }
+  .bps-row dd {
+    margin: 0;
+    color: var(--color-text-muted, #666);
+  }
+  .bps-row[data-current] dt,
+  .bps-row[data-current] dd {
+    color: var(--color-accent, oklch(45% 0.18 260));
+    font-weight: 600;
+  }
+}
+breakpoint-specimen:not([data-observe]) [data-bp=sm] {
+  font-style: italic;
+}
+@media (width >= 37.5rem) {
+  breakpoint-specimen:not([data-observe]) [data-bp=sm] {
+    font-style: normal;
+  }
+  breakpoint-specimen:not([data-observe]) .bps-row[data-bp=sm] dt,
+  breakpoint-specimen:not([data-observe]) .bps-row[data-bp=sm] dd {
+    color: var(--color-text, currentColor);
+  }
+}
+@media (width >= 48rem) {
+  breakpoint-specimen:not([data-observe]) .bps-row[data-bp=md] dt,
+  breakpoint-specimen:not([data-observe]) .bps-row[data-bp=md] dd {
+    color: var(--color-text, currentColor);
+  }
+}
+@media (width >= 64rem) {
+  breakpoint-specimen:not([data-observe]) .bps-row[data-bp=lg] dt,
+  breakpoint-specimen:not([data-observe]) .bps-row[data-bp=lg] dd {
+    color: var(--color-text, currentColor);
+  }
+}
+@media (width >= 87.5rem) {
+  breakpoint-specimen:not([data-observe]) .bps-row[data-bp=xl] dt,
+  breakpoint-specimen:not([data-observe]) .bps-row[data-bp=xl] dd {
+    color: var(--color-text, currentColor);
+  }
+}
+@media print {
+  breakpoint-specimen .bps-readout,
+  breakpoint-specimen .bps-ruler {
+    display: none;
+  }
+}
+
+/* src/web-components/layout-specimen/styles.css */
+layout-specimen {
+  display: flex;
+  flex-direction: column;
+  gap: var(--size-l, 1.5rem);
+  font: inherit;
+}
+layout-specimen .ls-entry {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--size-s, 0.75rem);
+  padding: var(--size-s, 0.75rem);
+  border: var(--border-width-thin, 1px) solid var(--color-border, #ddd);
+  border-radius: var(--radius-m, 0.5rem);
+  background: var(--color-surface, #fff);
+}
+layout-specimen .ls-entry-head {
+  display: flex;
+  flex-direction: column;
+  gap: var(--size-3xs, 0.125rem);
+}
+layout-specimen .ls-entry-name {
+  margin: 0;
+  font-size: 1em;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  color: var(--color-text, #1a1a1a);
+}
+layout-specimen .ls-entry-desc {
+  margin: 0;
+  font-size: 0.875em;
+  color: var(--color-text-muted, currentColor);
+}
+layout-specimen .ls-live {
+  padding: var(--size-s, 0.75rem);
+  background: var(--color-surface-sunken, oklch(94% 0 0));
+  border-radius: var(--radius-s, 0.25rem);
+  min-block-size: 4rem;
+}
+layout-specimen .ls-snippet {
+  margin: 0;
+  padding: var(--size-2xs, 0.375rem) var(--size-s, 0.5rem);
+  background: var(--color-surface-sunken, oklch(94% 0 0));
+  border-radius: var(--radius-s, 0.25rem);
+  font-size: 0.8em;
+  line-height: 1.4;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  color: var(--color-text, #1a1a1a);
+  overflow-x: auto;
+  white-space: pre;
+}
+layout-specimen .ls-box {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--size-xs, 0.5rem);
+  background: var(--color-action-subtle, color-mix(in oklch, var(--color-interactive, oklch(55% 0.2 260)) 15%, transparent));
+  color: var(--color-text, #1a1a1a);
+  border: var(--border-width-thin, 1px) solid var(--color-interactive, currentColor);
+  border-radius: var(--radius-s, 0.25rem);
+  font-size: 0.85em;
+  font-weight: 500;
+  min-block-size: 2rem;
+}
+layout-specimen .ls-box-main {
+  background: var(--color-surface, #fff);
+  border-style: dashed;
+}
+layout-specimen .ls-box-reel {
+  inline-size: 5rem;
+  flex-shrink: 0;
+}
+layout-specimen .ls-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--size-3xs, 0.125rem) var(--size-2xs, 0.375rem);
+  background: var(--color-surface-raised, var(--color-surface, #fff));
+  border: var(--border-width-thin, 1px) solid var(--color-border, #ddd);
+  border-radius: var(--radius-full, 999px);
+  font-size: 0.85em;
+}
+
+/* src/web-components/font-pairer/styles.css */
+font-pairer {
+  display: block;
+  max-inline-size: 56rem;
+}
+font-pairer:not(:defined) {
+  display: none;
+}
+
+/* src/web-components/gradient-builder/styles.css */
+gradient-builder {
+  display: block;
+  max-inline-size: 32rem;
+}
+gradient-builder:not(:defined) {
+  display: none;
+}
+
+/* src/web-components/brand-specimen/styles.css */
+.brand-specimen {
+  display: grid;
+  gap: var(--size-l, 1.5rem);
+}
+.bs-surfaces {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--size-m, 1rem);
+}
+.bs-surfaces figure {
+  margin: 0;
+  padding: var(--size-l, 1.5rem);
+  border-radius: var(--radius-m, 0.5rem);
+  display: grid;
+  place-items: center;
+  gap: var(--size-s, 0.75rem);
+}
+.bs-surfaces [data-surface=light] {
+  background: #fff;
+  color: #111;
+}
+.bs-surfaces [data-surface=dark] {
+  background: #111;
+  color: #fff;
+}
+.bs-scale {
+  display: flex;
+  align-items: end;
+  gap: var(--size-l, 1.5rem);
+  flex-wrap: wrap;
+}
+.bs-scale span {
+  display: grid;
+  justify-items: center;
+  gap: var(--size-2xs, 0.25rem);
+}
+.bs-clear-box {
+  display: inline-block;
+  padding: 1em;
+  outline: 1px dashed var(--color-border, #d4d4d8);
+  outline-offset: 0.25em;
+}
+
+/* src/web-components/icon-set/styles.css */
+icon-set:not(:defined) {
+  display: block;
+}
+icon-set {
+  display: block;
+  font-family: var(--font-sans, system-ui);
+  color: var(--color-text, #1a1a1a);
+}
+@scope (icon-set) {
+  .icon-set__search input {
+    inline-size: 100%;
+    padding: var(--size-s, 0.5rem);
+    border: 1px solid var(--color-border, #d4d4d8);
+    border-radius: var(--radius-s, 0.25rem);
+    font: inherit;
+    color: inherit;
+    background: var(--color-surface, #fff);
+  }
+  .icon-set__grid {
+    list-style: none;
+    margin: var(--size-m, 1rem) 0 0;
+    padding: 0;
+    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
+    gap: var(--size-2xs, 0.25rem);
+  }
+  .icon-set__grid [hidden] {
+    display: none;
+  }
+  .icon-set__grid button {
+    inline-size: 100%;
+    block-size: 100%;
+    display: grid;
+    align-content: start;
+    justify-items: center;
+    gap: var(--size-2xs, 0.25rem);
+    padding: var(--size-s, 0.75rem);
+    background: none;
+    border: 1px solid transparent;
+    border-radius: var(--radius-s, 0.25rem);
+    cursor: pointer;
+    font-size: var(--font-size-xs, 0.75rem);
+    color: inherit;
+  }
+  .icon-set__grid button > span:last-child {
+    min-block-size: 2lh;
+    text-align: center;
+    overflow-wrap: anywhere;
+  }
+  .icon-set__grid button:hover {
+    border-color: var(--color-border, #d4d4d8);
+    background: var(--color-surface-2, #f4f4f5);
+  }
+  .icon-set__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+  }
+  .icon-set__grid [data-icon] {
+    font-size: 1.5rem;
+  }
+}
+
+/* src/web-components/icon-specimen/styles.css */
+icon-specimen:not(:defined) {
+  display: block;
+}
+icon-specimen {
+  display: block;
+  font-family: var(--font-sans, system-ui);
+  color: var(--color-text, #1a1a1a);
+}
+@scope (icon-specimen) {
+  .icon-specimen {
+    inline-size: 100%;
+    border-collapse: collapse;
+  }
+  .icon-specimen th,
+  .icon-specimen td {
+    text-align: start;
+    padding: var(--size-s, 0.75rem);
+    border-block-end: 1px solid var(--color-border, #d4d4d8);
+  }
+  .icon-specimen thead th {
+    font-size: var(--font-size-xs, 0.75rem);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--color-text-muted, #71717a);
+  }
+  .icon-specimen td [data-icon] {
+    color: inherit;
+    vertical-align: middle;
+  }
+}
+
+/* src/patterns/do-dont.css */
+[data-list=do-dont],
+[data-list=pro-con] {
+  list-style: none;
+  padding-inline-start: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+  gap: var(--size-s, 0.5rem);
+}
+[data-list] > [data-do],
+[data-list] > [data-pro] {
+  padding: var(--size-s, 0.5rem) var(--size-m, 1rem);
+  border-inline-start: 4px solid var(--color-success, oklch(55% 0.2 145));
+  background: var(--color-success-subtle, oklch(95% 0.03 145));
+  border-radius: var(--radius-s, 0.25rem);
+}
+[data-list] > [data-dont],
+[data-list] > [data-con] {
+  padding: var(--size-s, 0.5rem) var(--size-m, 1rem);
+  border-inline-start: 4px solid var(--color-error, oklch(55% 0.22 25));
+  background: var(--color-error-subtle, oklch(95% 0.03 25));
+  border-radius: var(--radius-s, 0.25rem);
+}
+[data-list=do-dont] > [data-do]::before {
+  content: "Do";
+  display: block;
+  font-weight: 700;
+  font-size: var(--font-size-xs, 0.75rem);
+  color: var(--color-success, oklch(45% 0.2 145));
+  margin-block-end: var(--size-2xs, 0.25rem);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+[data-list=do-dont] > [data-dont]::before {
+  content: "Don\2019t";
+  display: block;
+  font-weight: 700;
+  font-size: var(--font-size-xs, 0.75rem);
+  color: var(--color-error, oklch(45% 0.22 25));
+  margin-block-end: var(--size-2xs, 0.25rem);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+[data-list=pro-con] > [data-pro]::before {
+  content: "Pro";
+  display: block;
+  font-weight: 700;
+  font-size: var(--font-size-xs, 0.75rem);
+  color: var(--color-success, oklch(45% 0.2 145));
+  margin-block-end: var(--size-2xs, 0.25rem);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+[data-list=pro-con] > [data-con]::before {
+  content: "Con";
+  display: block;
+  font-weight: 700;
+  font-size: var(--font-size-xs, 0.75rem);
+  color: var(--color-error, oklch(45% 0.22 25));
+  margin-block-end: var(--size-2xs, 0.25rem);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* src/patterns/token-table.css */
+.ds-token-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--font-size-s, 0.875rem);
+}
+.ds-token-table thead {
+  border-block-end: 2px solid var(--color-border, #ddd);
+}
+.ds-token-table th {
+  text-align: start;
+  padding: var(--size-xs, 0.25rem) var(--size-s, 0.5rem);
+  font-size: var(--font-size-xs, 0.75rem);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-text-muted, #666);
+}
+.ds-token-table td {
+  padding: var(--size-xs, 0.25rem) var(--size-s, 0.5rem);
+  border-block-end: 1px solid var(--color-border, #eee);
+  vertical-align: middle;
+}
+.ds-token-table code {
+  font-family: var(--font-mono, monospace);
+  font-size: var(--font-size-xs, 0.75rem);
+}
+.ds-token-table .ds-swatch {
+  display: inline-block;
+  width: 2.5rem;
+  height: 1.5rem;
+  border-radius: var(--radius-s, 0.25rem);
+  border: 1px solid var(--color-border, #ddd);
+  vertical-align: middle;
+}
+.ds-token-table token-swatch {
+  display: inline-flex;
+}
+.ds-token-table token-swatch > [data-preview] {
+  width: 2.5rem;
+  height: 1.5rem;
+  border-radius: var(--radius-s, 0.25rem);
+  border: 1px solid var(--color-border, #ddd);
+}
+
+/* src/index.css */