@digiko-npm/designsystem 0.5.0 → 0.7.2

package/src/components/toggle.css

@@ -4,6 +4,12 @@
    A toggle (switch) control for binary on/off states.
    Supports aria-checked attribute and modifier-class driven states.
 
+   ARIA requirements (consumer responsibility):
+   - Element: <button role="switch" aria-checked="false|true">
+   - Label: pair with visible label via aria-labelledby or wrap in <label>
+   - Keyboard: Space toggles state (native <button> handles this)
+   - State: update aria-checked on toggle
+
    Usage:
      <button class="ds-toggle" role="switch" aria-checked="false"></button>
 
@@ -40,8 +46,8 @@
 .ds-toggle::after {
   content: "";
   position: absolute;
-  left: 2px;
-  top: 50%;
+  inset-inline-start: 2px;
+  inset-block-start: 50%;
   width: 1.25rem;
   height: 1.25rem;
   border-radius: var(--ds-radius-full);
@@ -85,6 +91,7 @@
 .ds-toggle:focus-visible {
   outline: none;
   box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
+  scroll-margin-block: var(--ds-space-16, 4rem);
 }
 
 /* ---------------------------------------------------------------------------
@@ -105,6 +112,7 @@
 .ds-toggle--sm {
   width: 2rem;
   height: 1.125rem;
+  min-height: 1.5rem; /* WCAG 2.5.8: minimum 24px target */
 }
 
 .ds-toggle--sm::after {

package/src/components/toolbar.css

@@ -166,7 +166,7 @@
 }
 
 /* Responsive: mobile */
-@media (max-width: 1023px) {
+@media (max-width: 1023px) /* below --ds-breakpoint-lg */ {
   .ds-toolbar__row {
     padding-inline: var(--ds-space-3);
     gap: var(--ds-space-2);

package/src/components/tooltip.css

@@ -2,6 +2,12 @@
    Component: Tooltip
    Inverted bubble with arrow, positioned via modifier classes.
    Default placement: top.
+
+   ARIA requirements (consumer responsibility):
+   - Tooltip content: role="tooltip", id="[tooltip-id]"
+   - Trigger element: aria-describedby="[tooltip-id]"
+   - Keyboard: tooltip should show on focus as well as hover (CSS handles this via :hover)
+   - For focus support: also add :focus-within show logic if trigger is focusable
    ========================================================================== */
 
 .ds-tooltip {
@@ -62,8 +68,8 @@
 
 .ds-tooltip .ds-tooltip__content,
 .ds-tooltip--top .ds-tooltip__content {
-  bottom: calc(100% + var(--ds-offset-md));
-  left: 50%;
+  inset-block-end: calc(100% + var(--ds-offset-md));
+  inset-inline-start: 50%;
   transform: translateX(-50%) translateY(4px);
 }
 
@@ -75,8 +81,8 @@
 /* Arrow — points down */
 .ds-tooltip .ds-tooltip__content::after,
 .ds-tooltip--top .ds-tooltip__content::after {
-  top: 100%;
-  left: 50%;
+  inset-block-start: 100%;
+  inset-inline-start: 50%;
   transform: translateX(-50%);
   border-top-color: var(--ds-color-inverted);
 }
@@ -86,9 +92,9 @@
    ============================================= */
 
 .ds-tooltip--bottom .ds-tooltip__content {
-  top: calc(100% + var(--ds-offset-md));
-  bottom: auto;
-  left: 50%;
+  inset-block-start: calc(100% + var(--ds-offset-md));
+  inset-block-end: auto;
+  inset-inline-start: 50%;
   transform: translateX(-50%) translateY(-4px);
 }
 
@@ -98,9 +104,9 @@
 
 /* Arrow — points up */
 .ds-tooltip--bottom .ds-tooltip__content::after {
-  bottom: 100%;
-  top: auto;
-  left: 50%;
+  inset-block-end: 100%;
+  inset-block-start: auto;
+  inset-inline-start: 50%;
   transform: translateX(-50%);
   border-top-color: transparent;
   border-bottom-color: var(--ds-color-inverted);
@@ -111,10 +117,10 @@
    ============================================= */
 
 .ds-tooltip--left .ds-tooltip__content {
-  right: calc(100% + var(--ds-offset-md));
-  left: auto;
-  bottom: auto;
-  top: 50%;
+  inset-inline-end: calc(100% + var(--ds-offset-md));
+  inset-inline-start: auto;
+  inset-block-end: auto;
+  inset-block-start: 50%;
   transform: translateY(-50%) translateX(4px);
 }
 
@@ -124,13 +130,13 @@
 
 /* Arrow — points right */
 .ds-tooltip--left .ds-tooltip__content::after {
-  left: 100%;
-  top: 50%;
-  bottom: auto;
-  right: auto;
+  inset-inline-start: 100%;
+  inset-block-start: 50%;
+  inset-block-end: auto;
+  inset-inline-end: auto;
   transform: translateY(-50%);
   border-top-color: transparent;
-  border-left-color: var(--ds-color-inverted);
+  border-inline-start-color: var(--ds-color-inverted);
 }
 
 /* =============================================
@@ -138,10 +144,10 @@
    ============================================= */
 
 .ds-tooltip--right .ds-tooltip__content {
-  left: calc(100% + var(--ds-offset-md));
-  right: auto;
-  bottom: auto;
-  top: 50%;
+  inset-inline-start: calc(100% + var(--ds-offset-md));
+  inset-inline-end: auto;
+  inset-block-end: auto;
+  inset-block-start: 50%;
   transform: translateY(-50%) translateX(-4px);
 }
 
@@ -151,11 +157,11 @@
 
 /* Arrow — points left */
 .ds-tooltip--right .ds-tooltip__content::after {
-  right: 100%;
-  left: auto;
-  top: 50%;
-  bottom: auto;
+  inset-inline-end: 100%;
+  inset-inline-start: auto;
+  inset-block-start: 50%;
+  inset-block-end: auto;
   transform: translateY(-50%);
   border-top-color: transparent;
-  border-right-color: var(--ds-color-inverted);
+  border-inline-end-color: var(--ds-color-inverted);
 }

package/src/index.css

@@ -13,7 +13,9 @@
    Your values always win. Nothing breaks.
    ========================================================================== */
 
-@import './tokens/index.css';
-@import './base/index.css';
-@import './components/index.css';
-@import './utilities/index.css';
+@layer tokens, base, components, utilities;
+
+@import './tokens/index.css' layer(tokens);
+@import './base/index.css' layer(base);
+@import './components/index.css' layer(components);
+@import './utilities/index.css' layer(utilities);

package/src/tokens/colors.css

@@ -17,7 +17,13 @@
   --ds-color-surface-hover: #fafafa;
   --ds-color-surface-active: #f4f4f5;
 
-  /* --- Text — zinc hierarchy --- */
+  /* --- Text — zinc hierarchy ---
+     Contrast ratios on --ds-color-bg (#fafafa):
+     --text:           #09090b → ~19.3:1 ✅ WCAG AAA
+     --text-secondary: #52525b → ~7.6:1  ✅ WCAG AAA
+     --text-tertiary:  #a1a1aa → ~2.5:1  ⚠ Decorative/non-essential only (does not meet 4.5:1)
+     --text-disabled:  #d4d4d8 → ~1.5:1  ⚠ Disabled state (exempt per WCAG 1.4.3)
+     --- */
   --ds-color-text: #09090b;
   --ds-color-text-secondary: #52525b;
   --ds-color-text-tertiary: #a1a1aa;
@@ -64,18 +70,24 @@
 }
 
 /* Dark theme */
-[data-theme="dark"], .dark {
+[data-theme="dark"] {
   /* --- Backgrounds — deep, refined zinc-900 palette --- */
   --ds-color-bg: #09090b;
   --ds-color-bg-subtle: #0f0f11;
-  --ds-color-bg-muted: #27272a;
-  --ds-color-bg-elevated: #18181b;
+  --ds-color-bg-muted: #18181b;
+  --ds-color-bg-elevated: #1c1c20;
 
   --ds-color-surface: #0f0f11;
   --ds-color-surface-hover: #18181b;
   --ds-color-surface-active: #27272a;
 
-  /* --- Text --- */
+  /* --- Text ---
+     Contrast ratios on --ds-color-bg (#09090b):
+     --text:           #fafafa → ~19.3:1 ✅ WCAG AAA
+     --text-secondary: #a1a1aa → ~7.6:1  ✅ WCAG AAA
+     --text-tertiary:  #71717a → ~3.8:1  ⚠ Decorative/non-essential only (does not meet 4.5:1)
+     --text-disabled:  #3f3f46 → ~2.0:1  ⚠ Disabled state (exempt per WCAG 1.4.3)
+     --- */
   --ds-color-text: #fafafa;
   --ds-color-text-secondary: #a1a1aa;
   --ds-color-text-tertiary: #71717a;
@@ -162,7 +174,7 @@
 }
 
 /* Dark overrides for status/accent (brighter for contrast) */
-[data-theme="dark"], .dark {
+[data-theme="dark"] {
   --ds-color-success: #4ade80;
   --ds-color-success-subtle: rgba(74, 222, 128, 0.1);
   --ds-color-success-border: rgba(74, 222, 128, 0.2);

package/src/tokens/spacing.css

@@ -3,6 +3,13 @@
    Generous whitespace, responsive sections.
    ========================================================================== */
 
+/* Breakpoints (reference only — CSS cannot use vars in @media)
+   --ds-breakpoint-sm:  640px
+   --ds-breakpoint-md:  768px
+   --ds-breakpoint-lg:  1024px
+   --ds-breakpoint-xl:  1280px
+*/
+
 :root {
   /* --- Spacing Scale --- */
   --ds-space-0: 0;

package/src/utilities/a11y.css

@@ -0,0 +1,102 @@
+/* ==========================================================================
+   Utilities: Accessibility
+   Screen-reader helpers, skip links, focus utilities, and motion control.
+   ========================================================================== */
+
+/* ---------------------------------------------------------------------------
+   Screen Reader Only — visually hidden, available to assistive technology
+   --------------------------------------------------------------------------- */
+
+.ds-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* ---------------------------------------------------------------------------
+   Not Screen Reader Only — reset ds-sr-only when needed (e.g., responsive)
+   --------------------------------------------------------------------------- */
+
+.ds-not-sr-only {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}
+
+/* ---------------------------------------------------------------------------
+   Focus Visible Only — invisible by default, shown on keyboard focus
+   --------------------------------------------------------------------------- */
+
+.ds-focus-visible-only {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.ds-focus-visible-only:focus-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* ---------------------------------------------------------------------------
+   Skip Link — skip to main content, visible only on focus
+   --------------------------------------------------------------------------- */
+
+.ds-skip-link {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.ds-skip-link:focus-visible {
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: var(--ds-z-tooltip, 200);
+  width: auto;
+  height: auto;
+  padding: var(--ds-space-3) var(--ds-space-5);
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+  background-color: var(--ds-color-inverted);
+  color: var(--ds-color-on-inverted);
+  font-family: var(--ds-font-sans);
+  font-size: var(--ds-text-sm);
+  font-weight: var(--ds-weight-medium);
+  border-radius: 0 0 var(--ds-radius-lg) 0;
+  box-shadow: var(--ds-shadow-lg);
+  text-decoration: none;
+  outline: none;
+}
+
+/* ---------------------------------------------------------------------------
+   Reduce Motion — force reduced motion on a specific element
+   --------------------------------------------------------------------------- */
+
+.ds-reduce-motion,
+.ds-reduce-motion *,
+.ds-reduce-motion *::before,
+.ds-reduce-motion *::after {
+  animation-duration: 0.01ms !important;
+  animation-iteration-count: 1 !important;
+  transition-duration: 0.01ms !important;
+  scroll-behavior: auto !important;
+}

package/src/utilities/index.css

@@ -2,3 +2,4 @@
 @import './spacing.css';
 @import './text.css';
 @import './interactive.css';
+@import './a11y.css';

package/src/utilities/layout.css

@@ -78,7 +78,7 @@
   .ds-md\:flex-row { flex-direction: row; }
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 1024px) /* --ds-breakpoint-lg */ {
   .ds-lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
   .ds-lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
   .ds-lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
@@ -117,7 +117,7 @@
 .ds-relative { position: relative; }
 .ds-absolute { position: absolute; }
 .ds-fixed    { position: fixed; }
-.ds-sticky   { position: sticky; top: 0; }
+.ds-sticky   { position: sticky; inset-block-start: 0; }
 
 /* --- Overflow --- */
 .ds-overflow-hidden { overflow: hidden; }
@@ -133,14 +133,14 @@
 /* --- Stack (vertical spacing) ---
    :where() lowers specificity so ds-mt-* can override individual children. */
 :where(.ds-stack) > * + * {
-  margin-top: var(--ds-space-4);
+  margin-block-start: var(--ds-space-4);
 }
 
-:where(.ds-stack--sm) > * + *  { margin-top: var(--ds-space-2); }
-:where(.ds-stack--lg) > * + *  { margin-top: var(--ds-space-8); }
-:where(.ds-stack--xl) > * + *  { margin-top: var(--ds-space-12); }
-:where(.ds-stack--2xl) > * + * { margin-top: var(--ds-space-16); }
-:where(.ds-stack--3xl) > * + * { margin-top: var(--ds-space-24); }
+:where(.ds-stack--sm) > * + *  { margin-block-start: var(--ds-space-2); }
+:where(.ds-stack--lg) > * + *  { margin-block-start: var(--ds-space-8); }
+:where(.ds-stack--xl) > * + *  { margin-block-start: var(--ds-space-12); }
+:where(.ds-stack--2xl) > * + * { margin-block-start: var(--ds-space-16); }
+:where(.ds-stack--3xl) > * + * { margin-block-start: var(--ds-space-24); }
 
 /* --- Center content --- */
 .ds-center {
@@ -193,22 +193,22 @@
 
 /* --- Inset / Position Values --- */
 .ds-inset-0    { inset: 0; }
-.ds-inset-x-0  { left: 0; right: 0; }
-.ds-inset-y-0  { top: 0; bottom: 0; }
-.ds-top-0      { top: 0; }
-.ds-top-full   { top: 100%; }
-.ds-right-0    { right: 0; }
-.ds-bottom-0   { bottom: 0; }
-.ds-bottom-full { bottom: 100%; }
-.ds-left-0     { left: 0; }
-.ds-top-2    { top: var(--ds-space-2); }
-.ds-right-2  { right: var(--ds-space-2); }
-.ds-left-2   { left: var(--ds-space-2); }
-.ds-top-3    { top: var(--ds-space-3); }
-.ds-right-3  { right: var(--ds-space-3); }
-.ds-left-3   { left: var(--ds-space-3); }
-.ds-top-1\/2 { top: 50%; }
-.ds-left-1\/2 { left: 50%; }
+.ds-inset-x-0  { inset-inline-start: 0; inset-inline-end: 0; }
+.ds-inset-y-0  { inset-block-start: 0; inset-block-end: 0; }
+.ds-top-0      { inset-block-start: 0; }
+.ds-top-full   { inset-block-start: 100%; }
+.ds-right-0    { inset-inline-end: 0; }
+.ds-bottom-0   { inset-block-end: 0; }
+.ds-bottom-full { inset-block-end: 100%; }
+.ds-left-0     { inset-inline-start: 0; }
+.ds-top-2    { inset-block-start: var(--ds-space-2); }
+.ds-right-2  { inset-inline-end: var(--ds-space-2); }
+.ds-left-2   { inset-inline-start: var(--ds-space-2); }
+.ds-top-3    { inset-block-start: var(--ds-space-3); }
+.ds-right-3  { inset-inline-end: var(--ds-space-3); }
+.ds-left-3   { inset-inline-start: var(--ds-space-3); }
+.ds-top-1\/2 { inset-block-start: 50%; }
+.ds-left-1\/2 { inset-inline-start: 50%; }
 
 /* --- Object Fit --- */
 .ds-object-cover   { object-fit: cover; }
@@ -226,7 +226,7 @@
   .ds-sm\:table-cell { display: table-cell; }
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 1024px) /* --ds-breakpoint-lg */ {
   .ds-lg\:hidden { display: none; }
   .ds-lg\:block  { display: block; }
   .ds-lg\:flex   { display: flex; }
@@ -237,7 +237,7 @@
   .ds-sm\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 1024px) /* --ds-breakpoint-lg */ {
   .ds-lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
   .ds-lg\:grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
 }

package/src/utilities/spacing.css

@@ -36,15 +36,15 @@
 .ds-py-20 { padding-block: var(--ds-space-20); }
 .ds-py-24 { padding-block: var(--ds-space-24); }
 
-.ds-pt-2  { padding-top: var(--ds-space-2); }
-.ds-pt-4  { padding-top: var(--ds-space-4); }
-.ds-pt-6  { padding-top: var(--ds-space-6); }
-.ds-pt-8  { padding-top: var(--ds-space-8); }
-.ds-pt-12 { padding-top: var(--ds-space-12); }
-.ds-pt-16 { padding-top: var(--ds-space-16); }
+.ds-pt-2  { padding-block-start: var(--ds-space-2); }
+.ds-pt-4  { padding-block-start: var(--ds-space-4); }
+.ds-pt-6  { padding-block-start: var(--ds-space-6); }
+.ds-pt-8  { padding-block-start: var(--ds-space-8); }
+.ds-pt-12 { padding-block-start: var(--ds-space-12); }
+.ds-pt-16 { padding-block-start: var(--ds-space-16); }
 
-.ds-pb-4  { padding-bottom: var(--ds-space-4); }
-.ds-pb-8  { padding-bottom: var(--ds-space-8); }
+.ds-pb-4  { padding-block-end: var(--ds-space-4); }
+.ds-pb-8  { padding-block-end: var(--ds-space-8); }
 
 /* --- Margin --- */
 .ds-m-0    { margin: var(--ds-space-0); }
@@ -60,33 +60,33 @@
 .ds-my-6  { margin-block: var(--ds-space-6); }
 .ds-my-8  { margin-block: var(--ds-space-8); }
 
-.ds-mt-0  { margin-top: var(--ds-space-0); }
-.ds-mt-1  { margin-top: var(--ds-space-1); }
-.ds-mt-2  { margin-top: var(--ds-space-2); }
-.ds-mt-4  { margin-top: var(--ds-space-4); }
-.ds-mt-6  { margin-top: var(--ds-space-6); }
-.ds-mt-8  { margin-top: var(--ds-space-8); }
-
-.ds-mb-0  { margin-bottom: var(--ds-space-0); }
-.ds-mb-1  { margin-bottom: var(--ds-space-1); }
-.ds-mb-2  { margin-bottom: var(--ds-space-2); }
-.ds-mb-4  { margin-bottom: var(--ds-space-4); }
-.ds-mb-6  { margin-bottom: var(--ds-space-6); }
-.ds-mb-8  { margin-bottom: var(--ds-space-8); }
-
-.ds-mt-auto { margin-top: auto; }
-.ds-mb-auto { margin-bottom: auto; }
-.ds-ml-auto { margin-left: auto; }
-.ds-mr-auto { margin-right: auto; }
-.ds-ml-2    { margin-left: var(--ds-space-2); }
-.ds-ml-4    { margin-left: var(--ds-space-4); }
-.ds-mr-2    { margin-right: var(--ds-space-2); }
-.ds-mr-4    { margin-right: var(--ds-space-4); }
-
-.ds-mt-0\.5 { margin-top: var(--ds-space-0-5); }
-.ds-mt-3    { margin-top: var(--ds-space-3); }
-.ds-mb-0\.5 { margin-bottom: var(--ds-space-0-5); }
-.ds-mb-3    { margin-bottom: var(--ds-space-3); }
+.ds-mt-0  { margin-block-start: var(--ds-space-0); }
+.ds-mt-1  { margin-block-start: var(--ds-space-1); }
+.ds-mt-2  { margin-block-start: var(--ds-space-2); }
+.ds-mt-4  { margin-block-start: var(--ds-space-4); }
+.ds-mt-6  { margin-block-start: var(--ds-space-6); }
+.ds-mt-8  { margin-block-start: var(--ds-space-8); }
+
+.ds-mb-0  { margin-block-end: var(--ds-space-0); }
+.ds-mb-1  { margin-block-end: var(--ds-space-1); }
+.ds-mb-2  { margin-block-end: var(--ds-space-2); }
+.ds-mb-4  { margin-block-end: var(--ds-space-4); }
+.ds-mb-6  { margin-block-end: var(--ds-space-6); }
+.ds-mb-8  { margin-block-end: var(--ds-space-8); }
+
+.ds-mt-auto { margin-block-start: auto; }
+.ds-mb-auto { margin-block-end: auto; }
+.ds-ml-auto { margin-inline-start: auto; }
+.ds-mr-auto { margin-inline-end: auto; }
+.ds-ml-2    { margin-inline-start: var(--ds-space-2); }
+.ds-ml-4    { margin-inline-start: var(--ds-space-4); }
+.ds-mr-2    { margin-inline-end: var(--ds-space-2); }
+.ds-mr-4    { margin-inline-end: var(--ds-space-4); }
+
+.ds-mt-0\.5 { margin-block-start: var(--ds-space-0-5); }
+.ds-mt-3    { margin-block-start: var(--ds-space-3); }
+.ds-mb-0\.5 { margin-block-end: var(--ds-space-0-5); }
+.ds-mb-3    { margin-block-end: var(--ds-space-3); }
 
 /* --- Padding (granular) --- */
 .ds-p-0\.5 { padding: var(--ds-space-0-5); }
@@ -99,29 +99,29 @@
 .ds-py-1    { padding-block: var(--ds-space-1); }
 .ds-py-1\.5 { padding-block: var(--ds-space-1-5); }
 
-.ds-pb-2   { padding-bottom: var(--ds-space-2); }
-.ds-pb-6   { padding-bottom: var(--ds-space-6); }
+.ds-pb-2   { padding-block-end: var(--ds-space-2); }
+.ds-pb-6   { padding-block-end: var(--ds-space-6); }
 
-.ds-pl-2   { padding-left: var(--ds-space-2); }
-.ds-pl-3   { padding-left: var(--ds-space-3); }
-.ds-pl-4   { padding-left: var(--ds-space-4); }
-.ds-pr-2   { padding-right: var(--ds-space-2); }
-.ds-pr-3   { padding-right: var(--ds-space-3); }
-.ds-pr-4   { padding-right: var(--ds-space-4); }
-.ds-pr-7   { padding-right: 1.75rem; }
-.ds-pr-10  { padding-right: var(--ds-space-10); }
+.ds-pl-2   { padding-inline-start: var(--ds-space-2); }
+.ds-pl-3   { padding-inline-start: var(--ds-space-3); }
+.ds-pl-4   { padding-inline-start: var(--ds-space-4); }
+.ds-pr-2   { padding-inline-end: var(--ds-space-2); }
+.ds-pr-3   { padding-inline-end: var(--ds-space-3); }
+.ds-pr-4   { padding-inline-end: var(--ds-space-4); }
+.ds-pr-7   { padding-inline-end: 1.75rem; }
+.ds-pr-10  { padding-inline-end: var(--ds-space-10); }
 
 /* --- Gap (fractional) --- */
 .ds-gap-0\.5 { gap: var(--ds-space-0-5); }
 .ds-gap-1\.5 { gap: var(--ds-space-1-5); }
 
 /* --- Space-Y (owl selector) --- */
-.ds-space-y-1 > * + * { margin-top: var(--ds-space-1); }
-.ds-space-y-2 > * + * { margin-top: var(--ds-space-2); }
-.ds-space-y-3 > * + * { margin-top: var(--ds-space-3); }
-.ds-space-y-4 > * + * { margin-top: var(--ds-space-4); }
-.ds-space-y-6 > * + * { margin-top: var(--ds-space-6); }
-.ds-space-y-8 > * + * { margin-top: var(--ds-space-8); }
+.ds-space-y-1 > * + * { margin-block-start: var(--ds-space-1); }
+.ds-space-y-2 > * + * { margin-block-start: var(--ds-space-2); }
+.ds-space-y-3 > * + * { margin-block-start: var(--ds-space-3); }
+.ds-space-y-4 > * + * { margin-block-start: var(--ds-space-4); }
+.ds-space-y-6 > * + * { margin-block-start: var(--ds-space-6); }
+.ds-space-y-8 > * + * { margin-block-start: var(--ds-space-8); }
 
 /* --- Responsive: Padding --- */
 @media (min-width: 768px) {
@@ -133,7 +133,7 @@
   .ds-md\:py-16 { padding-block: var(--ds-space-16); }
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 1024px) /* --ds-breakpoint-lg */ {
   .ds-lg\:px-6 { padding-inline: var(--ds-space-6); }
   .ds-lg\:px-8 { padding-inline: var(--ds-space-8); }
   .ds-lg\:py-16 { padding-block: var(--ds-space-16); }

package/src/utilities/text.css

@@ -28,7 +28,7 @@
   .ds-md\:text-4xl { font-size: var(--ds-text-4xl); }
   .ds-md\:text-6xl { font-size: var(--ds-text-6xl); }
 }
-@media (min-width: 1024px) {
+@media (min-width: 1024px) /* --ds-breakpoint-lg */ {
   .ds-lg\:text-xl  { font-size: var(--ds-text-xl); }
   .ds-lg\:text-2xl { font-size: var(--ds-text-2xl); }
   .ds-lg\:text-3xl { font-size: var(--ds-text-3xl); }
@@ -45,9 +45,9 @@
 .ds-font-bold     { font-weight: var(--ds-weight-bold); }
 
 /* --- Text Alignment --- */
-.ds-text-left   { text-align: left; }
+.ds-text-left   { text-align: start; }
 .ds-text-center { text-align: center; }
-.ds-text-right  { text-align: right; }
+.ds-text-right  { text-align: end; }
 .ds-text-balance { text-wrap: balance; }
 
 /* --- Text Color --- */
@@ -164,10 +164,10 @@
 
 /* --- Border --- */
 .ds-border      { border: 1px solid var(--ds-color-border); }
-.ds-border-t    { border-top: 1px solid var(--ds-color-border); }
-.ds-border-b    { border-bottom: 1px solid var(--ds-color-border); }
-.ds-border-l    { border-left: 1px solid var(--ds-color-border); }
-.ds-border-r    { border-right: 1px solid var(--ds-color-border); }
+.ds-border-t    { border-block-start: 1px solid var(--ds-color-border); }
+.ds-border-b    { border-block-end: 1px solid var(--ds-color-border); }
+.ds-border-l    { border-inline-start: 1px solid var(--ds-color-border); }
+.ds-border-r    { border-inline-end: 1px solid var(--ds-color-border); }
 .ds-border-none { border: none; }
 
 /* --- Border Color --- */
@@ -179,7 +179,7 @@
 .ds-border-nav         { border-color: var(--ds-color-nav-border); }
 
 /* --- Divide --- */
-.ds-divide-y > * + * { border-top: 1px solid var(--ds-color-border); }
+.ds-divide-y > * + * { border-block-start: 1px solid var(--ds-color-border); }
 
 /* --- Border Radius --- */
 .ds-rounded-none { border-radius: var(--ds-radius-none); }