@gtivr4/a1-design-system-react 0.1.0 → 0.2.4

package/src/components/grid/grid.css

@@ -3,6 +3,16 @@
   grid-template-columns: repeat(var(--a1-grid-cols, 1), minmax(0, 1fr));
 }
 
+.a1-grid--bento {
+  grid-auto-flow: dense;
+  grid-auto-rows: var(--a1-grid-auto-rows, minmax(120px, auto));
+  align-items: stretch;
+}
+
+.a1-grid--bento > .a1-grid-item {
+  min-height: 0;
+}
+
 /* ── Static column-count modifiers ─────────────────────────────────────────── */
 
 .a1-grid--cols-1  { --a1-grid-cols: 1; }
@@ -26,7 +36,7 @@
 .a1-grid--xs-6  { --a1-grid-cols: 6; }
 .a1-grid--xs-12 { --a1-grid-cols: 12; }
 
-@media (min-width: 481px) {
+@media (--bp-sm-up) {
   .a1-grid--sm-1  { --a1-grid-cols: 1; }
   .a1-grid--sm-2  { --a1-grid-cols: 2; }
   .a1-grid--sm-3  { --a1-grid-cols: 3; }
@@ -35,7 +45,7 @@
   .a1-grid--sm-12 { --a1-grid-cols: 12; }
 }
 
-@media (min-width: 641px) {
+@media (--bp-md-up) {
   .a1-grid--md-1  { --a1-grid-cols: 1; }
   .a1-grid--md-2  { --a1-grid-cols: 2; }
   .a1-grid--md-3  { --a1-grid-cols: 3; }
@@ -44,7 +54,7 @@
   .a1-grid--md-12 { --a1-grid-cols: 12; }
 }
 
-@media (min-width: 1025px) {
+@media (--bp-lg-up) {
   .a1-grid--lg-1  { --a1-grid-cols: 1; }
   .a1-grid--lg-2  { --a1-grid-cols: 2; }
   .a1-grid--lg-3  { --a1-grid-cols: 3; }
@@ -53,7 +63,7 @@
   .a1-grid--lg-12 { --a1-grid-cols: 12; }
 }
 
-@media (min-width: 1441px) {
+@media (--bp-xl) {
   .a1-grid--xl-1  { --a1-grid-cols: 1; }
   .a1-grid--xl-2  { --a1-grid-cols: 2; }
   .a1-grid--xl-3  { --a1-grid-cols: 3; }
@@ -84,3 +94,118 @@
 .a1-grid-item--row-span-4 { grid-row: span 4; }
 .a1-grid-item--row-span-5 { grid-row: span 5; }
 .a1-grid-item--row-span-6 { grid-row: span 6; }
+
+/* ── Responsive GridItem span classes ─────────────────────────────────────── */
+
+.a1-grid-item--xs-span-1  { grid-column: span 1; }
+.a1-grid-item--xs-span-2  { grid-column: span 2; }
+.a1-grid-item--xs-span-3  { grid-column: span 3; }
+.a1-grid-item--xs-span-4  { grid-column: span 4; }
+.a1-grid-item--xs-span-5  { grid-column: span 5; }
+.a1-grid-item--xs-span-6  { grid-column: span 6; }
+.a1-grid-item--xs-span-7  { grid-column: span 7; }
+.a1-grid-item--xs-span-8  { grid-column: span 8; }
+.a1-grid-item--xs-span-9  { grid-column: span 9; }
+.a1-grid-item--xs-span-10 { grid-column: span 10; }
+.a1-grid-item--xs-span-11 { grid-column: span 11; }
+.a1-grid-item--xs-span-12 { grid-column: span 12; }
+.a1-grid-item--xs-span-full { grid-column: 1 / -1; }
+
+.a1-grid-item--xs-row-span-1 { grid-row: span 1; }
+.a1-grid-item--xs-row-span-2 { grid-row: span 2; }
+.a1-grid-item--xs-row-span-3 { grid-row: span 3; }
+.a1-grid-item--xs-row-span-4 { grid-row: span 4; }
+.a1-grid-item--xs-row-span-5 { grid-row: span 5; }
+.a1-grid-item--xs-row-span-6 { grid-row: span 6; }
+
+@media (--bp-sm-up) {
+  .a1-grid-item--sm-span-1  { grid-column: span 1; }
+  .a1-grid-item--sm-span-2  { grid-column: span 2; }
+  .a1-grid-item--sm-span-3  { grid-column: span 3; }
+  .a1-grid-item--sm-span-4  { grid-column: span 4; }
+  .a1-grid-item--sm-span-5  { grid-column: span 5; }
+  .a1-grid-item--sm-span-6  { grid-column: span 6; }
+  .a1-grid-item--sm-span-7  { grid-column: span 7; }
+  .a1-grid-item--sm-span-8  { grid-column: span 8; }
+  .a1-grid-item--sm-span-9  { grid-column: span 9; }
+  .a1-grid-item--sm-span-10 { grid-column: span 10; }
+  .a1-grid-item--sm-span-11 { grid-column: span 11; }
+  .a1-grid-item--sm-span-12 { grid-column: span 12; }
+  .a1-grid-item--sm-span-full { grid-column: 1 / -1; }
+
+  .a1-grid-item--sm-row-span-1 { grid-row: span 1; }
+  .a1-grid-item--sm-row-span-2 { grid-row: span 2; }
+  .a1-grid-item--sm-row-span-3 { grid-row: span 3; }
+  .a1-grid-item--sm-row-span-4 { grid-row: span 4; }
+  .a1-grid-item--sm-row-span-5 { grid-row: span 5; }
+  .a1-grid-item--sm-row-span-6 { grid-row: span 6; }
+}
+
+@media (--bp-md-up) {
+  .a1-grid-item--md-span-1  { grid-column: span 1; }
+  .a1-grid-item--md-span-2  { grid-column: span 2; }
+  .a1-grid-item--md-span-3  { grid-column: span 3; }
+  .a1-grid-item--md-span-4  { grid-column: span 4; }
+  .a1-grid-item--md-span-5  { grid-column: span 5; }
+  .a1-grid-item--md-span-6  { grid-column: span 6; }
+  .a1-grid-item--md-span-7  { grid-column: span 7; }
+  .a1-grid-item--md-span-8  { grid-column: span 8; }
+  .a1-grid-item--md-span-9  { grid-column: span 9; }
+  .a1-grid-item--md-span-10 { grid-column: span 10; }
+  .a1-grid-item--md-span-11 { grid-column: span 11; }
+  .a1-grid-item--md-span-12 { grid-column: span 12; }
+  .a1-grid-item--md-span-full { grid-column: 1 / -1; }
+
+  .a1-grid-item--md-row-span-1 { grid-row: span 1; }
+  .a1-grid-item--md-row-span-2 { grid-row: span 2; }
+  .a1-grid-item--md-row-span-3 { grid-row: span 3; }
+  .a1-grid-item--md-row-span-4 { grid-row: span 4; }
+  .a1-grid-item--md-row-span-5 { grid-row: span 5; }
+  .a1-grid-item--md-row-span-6 { grid-row: span 6; }
+}
+
+@media (--bp-lg-up) {
+  .a1-grid-item--lg-span-1  { grid-column: span 1; }
+  .a1-grid-item--lg-span-2  { grid-column: span 2; }
+  .a1-grid-item--lg-span-3  { grid-column: span 3; }
+  .a1-grid-item--lg-span-4  { grid-column: span 4; }
+  .a1-grid-item--lg-span-5  { grid-column: span 5; }
+  .a1-grid-item--lg-span-6  { grid-column: span 6; }
+  .a1-grid-item--lg-span-7  { grid-column: span 7; }
+  .a1-grid-item--lg-span-8  { grid-column: span 8; }
+  .a1-grid-item--lg-span-9  { grid-column: span 9; }
+  .a1-grid-item--lg-span-10 { grid-column: span 10; }
+  .a1-grid-item--lg-span-11 { grid-column: span 11; }
+  .a1-grid-item--lg-span-12 { grid-column: span 12; }
+  .a1-grid-item--lg-span-full { grid-column: 1 / -1; }
+
+  .a1-grid-item--lg-row-span-1 { grid-row: span 1; }
+  .a1-grid-item--lg-row-span-2 { grid-row: span 2; }
+  .a1-grid-item--lg-row-span-3 { grid-row: span 3; }
+  .a1-grid-item--lg-row-span-4 { grid-row: span 4; }
+  .a1-grid-item--lg-row-span-5 { grid-row: span 5; }
+  .a1-grid-item--lg-row-span-6 { grid-row: span 6; }
+}
+
+@media (--bp-xl) {
+  .a1-grid-item--xl-span-1  { grid-column: span 1; }
+  .a1-grid-item--xl-span-2  { grid-column: span 2; }
+  .a1-grid-item--xl-span-3  { grid-column: span 3; }
+  .a1-grid-item--xl-span-4  { grid-column: span 4; }
+  .a1-grid-item--xl-span-5  { grid-column: span 5; }
+  .a1-grid-item--xl-span-6  { grid-column: span 6; }
+  .a1-grid-item--xl-span-7  { grid-column: span 7; }
+  .a1-grid-item--xl-span-8  { grid-column: span 8; }
+  .a1-grid-item--xl-span-9  { grid-column: span 9; }
+  .a1-grid-item--xl-span-10 { grid-column: span 10; }
+  .a1-grid-item--xl-span-11 { grid-column: span 11; }
+  .a1-grid-item--xl-span-12 { grid-column: span 12; }
+  .a1-grid-item--xl-span-full { grid-column: 1 / -1; }
+
+  .a1-grid-item--xl-row-span-1 { grid-row: span 1; }
+  .a1-grid-item--xl-row-span-2 { grid-row: span 2; }
+  .a1-grid-item--xl-row-span-3 { grid-row: span 3; }
+  .a1-grid-item--xl-row-span-4 { grid-row: span 4; }
+  .a1-grid-item--xl-row-span-5 { grid-row: span 5; }
+  .a1-grid-item--xl-row-span-6 { grid-row: span 6; }
+}

package/src/components/heading/Heading.jsx

@@ -1,10 +1,13 @@
 import "./heading.css";
 
-const headingSizes = ["xl", "lg", "md", "sm", "xs"];
+const headingSizes = ["xxl", "xl", "lg", "md", "sm", "xs"];
 const displaySizes = ["sm", "md", "lg", "xl", "xxl", "jumbo", "xJumbo"];
 const colors = ["default", "muted", "accent"];
+const margins = ["sm", "md", "lg"];
 const levels = ["h1", "h2", "h3", "h4", "h5", "h6"];
 const breakpoints = ["xs", "sm", "md", "lg", "xl"];
+const textWraps = ["balance"];
+const aligns = ["left", "center", "right"];
 
 const levelDefaults = { h1: "xl", h2: "lg", h3: "md", h4: "sm", h5: "xs", h6: "xs" };
 
@@ -40,6 +43,9 @@ export function Heading({
   type = "heading",
   size,
   color = "default",
+  margin,
+  textWrap,
+  align,
   className = "",
   style,
   ...props
@@ -50,6 +56,9 @@ export function Heading({
   const defaultSize = isDisplay ? "md" : (levelDefaults[resolvedAs] ?? "md");
   const resolvedSize = resolveSize(size, validSizes, defaultSize);
   const resolvedColor = colors.includes(color) ? color : "default";
+  const resolvedMargin = margins.includes(margin) ? margin : null;
+  const resolvedTextWrap = textWraps.includes(textWrap) ? textWrap : null;
+  const resolvedAlign = aligns.includes(align) ? align : null;
   const responsiveSizeStyle = getResponsiveSizeStyle(size, type, validSizes);
   const resolvedStyle = Object.keys(responsiveSizeStyle).length
     ? { ...responsiveSizeStyle, ...style }
@@ -60,6 +69,9 @@ export function Heading({
     `a1-heading--${type}`,
     `a1-heading--${type}-${resolvedSize}`,
     resolvedColor !== "default" && `a1-heading--${resolvedColor}`,
+    resolvedMargin && `a1-heading--margin-${resolvedMargin}`,
+    resolvedTextWrap && `a1-heading--wrap-${resolvedTextWrap}`,
+    resolvedAlign && `a1-heading--align-${resolvedAlign}`,
     className
   ]
     .filter(Boolean)
@@ -67,3 +79,31 @@ export function Heading({
 
   return <Component className={classes} style={resolvedStyle} {...props} />;
 }
+
+export function HeadingMark({
+  children,
+  variant = "highlight",
+  underlineStyle = "swoop",
+  className = "",
+  ...props
+}) {
+  const resolvedVariant = variant === "underline" ? "underline" : "highlight";
+  const resolvedUnderlineStyle = ["swoop", "wave", "sketch"].includes(underlineStyle)
+    ? underlineStyle
+    : "swoop";
+
+  const classes = [
+    "a1-heading-mark",
+    `a1-heading-mark--${resolvedVariant}`,
+    resolvedVariant === "underline" && `a1-heading-mark--underline-${resolvedUnderlineStyle}`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <span className={classes} {...props}>
+      {children}
+    </span>
+  );
+}

package/src/components/heading/heading.css

@@ -7,13 +7,13 @@
   color: var(--a1-heading-color, var(--semantic-color-text-default));
 }
 
-@media (min-width: 481px) {
+@media (--bp-sm-up) {
   .a1-heading {
     --a1-heading-responsive-size: var(--a1-heading-size-sm, var(--a1-heading-size));
   }
 }
 
-@media (min-width: 641px) {
+@media (--bp-md-up) {
   .a1-heading {
     --a1-heading-responsive-size: var(
       --a1-heading-size-md,
@@ -22,7 +22,7 @@
   }
 }
 
-@media (min-width: 1025px) {
+@media (--bp-lg-up) {
   .a1-heading {
     --a1-heading-responsive-size: var(
       --a1-heading-size-lg,
@@ -31,7 +31,7 @@
   }
 }
 
-@media (min-width: 1441px) {
+@media (--bp-xl) {
   .a1-heading {
     --a1-heading-responsive-size: var(
       --a1-heading-size-xl,
@@ -56,6 +56,7 @@
 }
 
 /* Heading sizes */
+.a1-heading--heading-xxl { --a1-heading-size: var(--semantic-font-size-heading-xxl); }
 .a1-heading--heading-xl { --a1-heading-size: var(--semantic-font-size-heading-xl); }
 .a1-heading--heading-lg { --a1-heading-size: var(--semantic-font-size-heading-lg); }
 .a1-heading--heading-md { --a1-heading-size: var(--semantic-font-size-heading-md); }
@@ -74,3 +75,63 @@
 /* Color modifiers */
 .a1-heading--muted   { --a1-heading-color: var(--semantic-color-text-muted); }
 .a1-heading--accent  { --a1-heading-color: var(--semantic-color-text-accent); }
+
+/* Margin modifiers — em units scale with the heading's own font size */
+.a1-heading--margin-sm { margin-bottom: 0.25em; }
+.a1-heading--margin-md { margin-bottom: 0.5em; }
+.a1-heading--margin-lg { margin-bottom: 1em; }
+
+/* Text wrap */
+.a1-heading--wrap-balance { text-wrap: balance; }
+
+/* Alignment */
+.a1-heading--align-left   { text-align: start;  }
+.a1-heading--align-center { text-align: center; }
+.a1-heading--align-right  { text-align: end;    }
+
+/* Expressive marks */
+.a1-heading-mark {
+  display: inline;
+  position: relative;
+  color: inherit;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+
+.a1-heading-mark--highlight {
+  padding: var(--component-heading-mark-highlight-padding-block) var(--component-heading-mark-highlight-padding-inline);
+  color: var(--component-heading-mark-highlight-foreground-color);
+  font-weight: var(--component-heading-mark-highlight-font-weight);
+  background: var(--component-heading-mark-highlight-background-color);
+  box-shadow: var(--component-heading-mark-highlight-shadow);
+}
+
+.a1-heading-mark--underline {
+  --a1-heading-mark-underline-mask: url("data:image/svg+xml,%3Csvg width='480' height='72' viewBox='0 0 480 72' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 44C68 33 127 39 188 38C272 36 349 23 472 34' stroke='black' stroke-width='40' stroke-linecap='round'/%3E%3C/svg%3E");
+  z-index: 0;
+}
+
+.a1-heading-mark--underline::after {
+  content: "";
+  position: absolute;
+  left: -0.03em;
+  right: -0.03em;
+  bottom: var(--component-heading-mark-underline-offset);
+  z-index: -1;
+  height: var(--component-heading-mark-underline-height);
+  background: var(--component-heading-mark-underline-color);
+  mask-image: var(--a1-heading-mark-underline-mask);
+  mask-repeat: no-repeat;
+  mask-size: 100% 100%;
+  -webkit-mask-image: var(--a1-heading-mark-underline-mask);
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%;
+}
+
+.a1-heading-mark--underline-wave {
+  --a1-heading-mark-underline-mask: url("data:image/svg+xml,%3Csvg width='480' height='72' viewBox='0 0 480 72' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 40C38 19 64 58 94 38C124 18 150 57 180 38C211 18 237 58 268 38C299 18 325 57 356 38C387 19 416 56 472 36' stroke='black' stroke-width='32' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+.a1-heading-mark--underline-sketch {
+  --a1-heading-mark-underline-mask: url("data:image/svg+xml,%3Csvg width='480' height='72' viewBox='0 0 480 72' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 43C72 38 134 31 194 36C273 43 351 31 472 39' stroke='black' stroke-width='28' stroke-linecap='round'/%3E%3Cpath d='M15 52C85 43 137 48 213 44C293 40 372 46 463 31' stroke='black' stroke-width='16' stroke-linecap='round' opacity='.76'/%3E%3C/svg%3E");
+}

package/src/components/icon/icon.css

@@ -2,6 +2,7 @@
   font-size: inherit;
   line-height: 1;
   user-select: none;
+  font-family: var(--a1-icon-font-family, 'Material Symbols Outlined');
   font-variation-settings:
     "FILL" var(--a1-icon-fill, 0),
     "wght" var(--a1-icon-weight, var(--base-font-weight-regular)),

package/src/components/icon-button/icon-button.css

@@ -3,6 +3,7 @@
    ═══════════════════════════════════════════════════════════════════════════ */
 
 .a1-icon-button {
+  --a1-icon-weight: 500;
   display: inline-flex;
   align-items: center;
   justify-content: center;

package/src/components/inline/inline.css

@@ -0,0 +1,51 @@
+del {
+  color: var(--semantic-color-text-muted);
+}
+
+cite {
+  background: var(--semantic-color-surface-raised);
+  padding: var(--component-inline-padding-block) var(--component-inline-padding-inline);
+  border-radius: var(--component-inline-border-radius);
+  font-style: italic;
+}
+
+code {
+  font-family: var(--component-inline-font-family-mono);
+  background: var(--semantic-color-surface-raised);
+  padding: var(--component-inline-padding-block) var(--component-inline-padding-inline);
+  border-radius: var(--component-inline-border-radius);
+  font-size: var(--component-inline-code-font-size);
+}
+
+kbd {
+  font-family: var(--component-inline-font-family-mono);
+  background: var(--semantic-color-surface-raised);
+  padding: var(--component-inline-padding-block) var(--component-inline-kbd-padding-inline);
+  border-radius: var(--component-inline-border-radius);
+  border: var(--base-spacing-1) solid var(--semantic-color-border-subtle);
+  font-size: var(--component-inline-code-font-size);
+}
+
+var {
+  font-style: italic;
+  font-weight: bold;
+}
+
+time {
+  font-weight: var(--component-inline-emphasis-font-weight);
+}
+
+q {
+  font-style: italic;
+  font-weight: var(--component-inline-emphasis-font-weight);
+}
+
+/* ── Custom inline utilities ─────────────────────────────────────────────────── */
+
+.a1-muted {
+  color: var(--semantic-color-text-muted);
+}
+
+.a1-accent {
+  color: var(--semantic-color-text-accent);
+}

package/src/components/inline-editable/InlineEditable.jsx

@@ -0,0 +1,77 @@
+import { useEffect, useRef, useState } from "react";
+import "./inline-editable.css";
+
+export function InlineEditable({
+  value,
+  onChange,
+  multiline = false,
+  disabled = false,
+  placeholder,
+  className = "",
+  inputClassName = "",
+  children,
+  ...props
+}) {
+  const [editing, setEditing] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (editing && ref.current) {
+      ref.current.focus();
+      ref.current.select?.();
+    }
+  }, [editing]);
+
+  function activate() {
+    if (!disabled) setEditing(true);
+  }
+
+  function deactivate() {
+    setEditing(false);
+  }
+
+  const inputClasses = ["a1-inline-editable__input", inputClassName].filter(Boolean).join(" ");
+
+  if (editing) {
+    return multiline ? (
+      <textarea
+        ref={ref}
+        className={inputClasses}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onBlur={deactivate}
+        onKeyDown={(e) => { if (e.key === "Escape") deactivate(); }}
+      />
+    ) : (
+      <input
+        ref={ref}
+        type="text"
+        className={inputClasses}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onBlur={deactivate}
+        onKeyDown={(e) => { if (e.key === "Enter" || e.key === "Escape") deactivate(); }}
+      />
+    );
+  }
+
+  const wrapperClasses = [
+    "a1-inline-editable",
+    disabled && "a1-inline-editable--disabled",
+    className,
+  ].filter(Boolean).join(" ");
+
+  return (
+    <div
+      className={wrapperClasses}
+      onClick={activate}
+      onKeyDown={(e) => { if (e.key === "Enter") activate(); }}
+      tabIndex={disabled ? undefined : 0}
+      role={disabled ? undefined : "button"}
+      aria-label={props["aria-label"] ?? "Click to edit"}
+      {...props}
+    >
+      {children ?? (placeholder && <span className="a1-inline-editable__placeholder">{placeholder}</span>)}
+    </div>
+  );
+}

package/src/components/inline-editable/inline-editable.css

@@ -0,0 +1,47 @@
+.a1-inline-editable {
+  cursor: text;
+  display: block;
+  border-radius: var(--base-border-radius-sm);
+  outline: 1px dashed transparent;
+  outline-offset: 2px;
+  transition: outline-color 0.15s;
+}
+
+.a1-inline-editable:hover {
+  outline-color: var(--semantic-color-border-default);
+}
+
+.a1-inline-editable:focus-visible {
+  outline: 2px solid var(--semantic-color-border-strong);
+  outline-offset: 2px;
+}
+
+.a1-inline-editable--disabled {
+  cursor: default;
+}
+
+.a1-inline-editable__placeholder {
+  color: var(--semantic-color-text-muted);
+  opacity: 0.7;
+}
+
+.a1-inline-editable__input {
+  display: block;
+  width: 100%;
+  min-height: 2em;
+  background: var(--semantic-color-surface-page);
+  border: 1px solid var(--semantic-color-border-strong);
+  border-radius: var(--base-border-radius-sm);
+  padding: var(--base-spacing-4) var(--base-spacing-8);
+  font: inherit;
+  color: var(--semantic-color-text-default);
+  resize: vertical;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.a1-inline-editable__input:focus {
+  border-color: var(--semantic-color-interactive-default);
+  outline: 2px solid var(--semantic-color-interactive-default);
+  outline-offset: -1px;
+}

package/src/components/inset/Inset.jsx

@@ -0,0 +1,27 @@
+import "./inset.css";
+import { resolveSpacing } from "../structure-utils.js";
+
+export function Inset({
+  as: Component = "div",
+  space = 16,
+  block,
+  inline,
+  className = "",
+  children,
+  ...props
+}) {
+  const blockValue = resolveSpacing(block) ?? resolveSpacing(space);
+  const inlineValue = resolveSpacing(inline) ?? resolveSpacing(space);
+
+  const style = {
+    "--a1-inset-block": blockValue,
+    "--a1-inset-inline": inlineValue,
+    ...props.style,
+  };
+
+  return (
+    <Component className={["a1-inset", className].filter(Boolean).join(" ")} style={style} {...props}>
+      {children}
+    </Component>
+  );
+}

package/src/components/inset/inset.css

@@ -0,0 +1,6 @@
+.a1-inset {
+  box-sizing: border-box;
+  padding-block: var(--a1-inset-block, var(--base-spacing-16));
+  padding-inline: var(--a1-inset-inline, var(--base-spacing-16));
+  min-width: 0;
+}

package/src/components/labels/Labels.jsx

@@ -10,20 +10,20 @@ export function LabelsProvider({ locale = null, brand = null, labels, children }
   );
 }
 
-export function useLabel(key) {
+export function useLabel(key, defaultValue) {
   const { locale, brand, labels } = useContext(LabelsContext);
-  if (!labels) return key;
+  if (!labels) return defaultValue ?? key;
 
   const parts = key.split(".");
   let node = labels?.label;
   for (const part of parts) {
-    if (node == null || typeof node !== "object") return key;
+    if (node == null || typeof node !== "object") return defaultValue ?? key;
     node = node[part];
   }
-  if (node == null) return key;
+  if (node == null) return defaultValue ?? key;
 
   // Resolution order: locale > brand > default
   if (locale && node.locale?.[locale] != null) return node.locale[locale];
   if (brand && node.brand?.[brand] != null) return node.brand[brand];
-  return node.$value ?? key;
+  return node.$value ?? defaultValue ?? key;
 }

package/src/components/link/Link.jsx

@@ -6,7 +6,6 @@ const weights = ["normal", "medium", "semibold", "bold"];
 const iconPositions = ["start", "end"];
 
 export function Link({
-  as: Component = "a",
   size,
   weight,
   icon,
@@ -32,10 +31,10 @@ export function Link({
   const iconEl = icon ? <Icon name={icon} className="a1-link__icon" /> : null;
 
   return (
-    <Component className={classes} {...props}>
+    <a className={classes} {...props}>
       {resolvedPosition === "start" && iconEl}
       <span className="a1-link__text">{children}</span>
       {resolvedPosition === "end" && iconEl}
-    </Component>
+    </a>
   );
 }

package/src/components/link/link.css

@@ -10,11 +10,40 @@
 .a1-link:active { color: var(--component-link-color-pressed); }
 
 .a1-link:focus-visible {
-  outline: var(--component-link-focus-ring-width) solid var(--component-link-color);
+  outline: var(--component-link-focus-ring-width) solid currentColor;
   outline-offset: var(--component-link-focus-ring-offset);
   border-radius: var(--component-link-focus-ring-radius);
 }
 
+/* Dark mode and inverse — bright light blue for contrast on dark backgrounds */
+.a1-theme-dark .a1-link,
+.a1-inverse .a1-link {
+  color: var(--base-color-info-100);
+}
+
+.a1-theme-dark .a1-link:hover,
+.a1-inverse .a1-link:hover {
+  color: var(--base-color-info-50);
+}
+
+.a1-theme-dark .a1-link:active,
+.a1-inverse .a1-link:active {
+  color: var(--base-color-info-200);
+}
+
+/* Dark on inverse restores light-mode values */
+.a1-theme-dark .a1-inverse .a1-link {
+  color: var(--component-link-color);
+}
+
+.a1-theme-dark .a1-inverse .a1-link:hover {
+  color: var(--component-link-color-hover);
+}
+
+.a1-theme-dark .a1-inverse .a1-link:active {
+  color: var(--component-link-color-pressed);
+}
+
 .a1-link__text {
   text-decoration: underline;
   text-decoration-color: currentColor;