@devslab/dds-css 0.21.2 → 0.22.1

package/dist/components/choice.css

@@ -0,0 +1,27 @@
+.dds-choice {display:flex;flex-direction:column;gap:var(--dds-space-4);position:relative;min-inline-size:0;font-family:var(--dds-font-family-sans);font-size:var(--dds-typo-body-2-font-size);color:var(--dds-color-text-primary);}
+.dds-choice-label {font-size:var(--dds-typo-label-font-size);line-height:var(--dds-typo-label-line-height);font-weight:var(--dds-typo-label-font-weight);}
+.dds-choice-control {position:relative;display:flex;align-items:center;inline-size:100%;min-block-size:var(--dds-space-40);border:1px solid var(--dds-color-border-strong);border-radius:var(--dds-radius-md);background:var(--dds-color-bg-default);}
+.dds-choice-control:focus-within {outline:var(--dds-space-2) solid var(--dds-color-border-focus);}
+.dds-choice-input,.dds-choice-trigger {box-sizing:border-box;min-inline-size:0;min-block-size:var(--dds-space-40);border:0;background:transparent;color:inherit;font:inherit;padding-inline:var(--dds-space-12);}
+.dds-choice-input {flex:1;inline-size:100%;outline:none;}
+.dds-choice-trigger {cursor:pointer;text-align:start;}
+.dds-choice-control > .dds-choice-trigger:first-child {inline-size:100%;}
+.dds-choice-clear {flex:none;min-inline-size:var(--dds-space-32);min-block-size:var(--dds-space-32);padding:var(--dds-space-4);border:0;border-radius:var(--dds-radius-sm);background:transparent;color:var(--dds-color-text-secondary);cursor:pointer;}
+.dds-choice-content {box-sizing:border-box;min-inline-size:var(--reference-width);max-inline-size:calc(100vw - var(--dds-space-32));max-block-size:min(320px,var(--available-height,320px));overflow:auto;padding:var(--dds-space-4);background:var(--dds-color-bg-elevated);color:var(--dds-color-text-primary);border:1px solid var(--dds-color-border-default);border-radius:var(--dds-radius-md);box-shadow:var(--dds-elevation-2);font-family:var(--dds-font-family-sans);font-size:var(--dds-typo-body-2-font-size);}
+.dds-choice-item {box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;min-block-size:var(--dds-space-40);padding-inline:var(--dds-space-12);border-radius:var(--dds-radius-sm);cursor:pointer;outline:none;overflow:hidden;white-space:nowrap;}
+.dds-choice-item[data-highlighted] {background:var(--dds-color-bg-brand-subtle);}
+.dds-choice-item[data-state="checked"],.dds-choice-item[data-selected] {font-weight:600;}
+.dds-choice-item[data-disabled] {opacity:.45;cursor:not-allowed;}
+.dds-choice-description {font-size:var(--dds-typo-caption-font-size);color:var(--dds-color-text-secondary);overflow:hidden;text-overflow:ellipsis;}
+.dds-choice-status {padding:var(--dds-space-12);color:var(--dds-color-text-secondary);}
+.dds-choice-status:empty {padding:0;}
+.dds-choice-validation {position:absolute;inline-size:1px;block-size:1px;padding:0;border:0;clip-path:inset(50%);overflow:hidden;}
+.dds-choice[data-label-placement="hidden"] .dds-choice-label {position:absolute;inline-size:1px;block-size:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap;}
+.dds-choice[data-label-placement="inside"] .dds-choice-label {position:absolute;z-index:1;inset-inline-start:var(--dds-space-12);inset-block-start:var(--dds-space-20);pointer-events:none;color:var(--dds-color-text-secondary);}
+.dds-choice[data-label-placement="inside"] .dds-choice-control {min-block-size:calc(var(--dds-space-40) + var(--dds-space-16));}
+.dds-choice[data-label-placement="inside"] :is(.dds-choice-input,.dds-choice-trigger) {padding-block-start:var(--dds-space-16);}
+.dds-choice[data-label-placement="inside"]:is(:focus-within,[data-has-value]) .dds-choice-label {inset-block-start:var(--dds-space-4);font-size:var(--dds-typo-caption-font-size);}
+.dds-choice[data-label-placement="inside"]:not(:focus-within):not([data-has-value]) .dds-choice-input::placeholder {color:transparent;}
+.dds-choice[data-label-placement="inside"]:not(:focus-within):not([data-has-value]) .dds-choice-value {visibility:hidden;}
+.dds-choice[data-disabled] {opacity:.45;}
+@media(pointer:coarse){.dds-choice-input,.dds-choice-trigger,.dds-choice-clear {min-block-size:44px;min-inline-size:44px;}}

package/dist/components/input.css

@@ -0,0 +1,24 @@
+/* Attribute scoping preserves the existing native input.dds-input contract. */
+.dds-input[data-label-placement] {position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--dds-space-4);inline-size:100%;block-size:auto;height:auto;padding:0;border:0;background:transparent;color:var(--dds-color-text-primary);}
+.dds-input__label {font-size:var(--dds-typo-label-font-size);line-height:var(--dds-typo-label-line-height);font-weight:var(--dds-typo-label-font-weight);}
+.dds-input__control {box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--dds-space-40);padding-inline:var(--dds-space-12);font:inherit;background:var(--dds-color-bg-default);color:var(--dds-color-text-primary);border:1px solid var(--dds-color-border-strong);border-radius:var(--dds-radius-md);}
+.dds-input__control::placeholder {color:var(--dds-color-text-muted);}
+.dds-input__control:focus-visible {outline:var(--dds-space-2) solid var(--dds-color-border-focus);outline-offset:0;}
+.dds-input__control[aria-invalid="true"] {border-color:var(--dds-color-status-danger);}
+.dds-input:has(.dds-input__clear) .dds-input__control {padding-inline-end:var(--dds-space-48);}
+.dds-input__clear {position:absolute;inset-inline-end:var(--dds-space-4);inset-block-end:var(--dds-space-4);display:grid;place-items:center;inline-size:var(--dds-space-32);block-size:var(--dds-space-32);padding:0;border:0;border-radius:var(--dds-radius-sm);background:transparent;color:var(--dds-color-text-secondary);font:inherit;cursor:pointer;}
+.dds-input__clear:hover {background:var(--dds-color-bg-subtle);}
+.dds-input__clear:focus-visible {outline:var(--dds-space-2) solid var(--dds-color-border-focus);outline-offset:var(--dds-space-2);}
+.dds-input[data-disabled] {opacity:.45;cursor:not-allowed;}
+.dds-input[data-disabled] .dds-input__control {cursor:not-allowed;background:var(--dds-color-bg-subtle);}
+.dds-input[data-label-placement="hidden"] .dds-input__label {position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
+.dds-input[data-label-placement="inside"] .dds-input__control {block-size:calc(var(--dds-space-40) + var(--dds-space-16));padding-block:var(--dds-space-20) var(--dds-space-4);}
+.dds-input[data-label-placement="inside"] .dds-input__label {position:absolute;inset-inline-start:var(--dds-space-12);inset-block-start:var(--dds-space-20);pointer-events:none;color:var(--dds-color-text-secondary);}
+.dds-input[data-label-placement="inside"]:is(:focus-within,[data-filled],:has(input:-webkit-autofill)) .dds-input__label {inset-block-start:var(--dds-space-4);font-size:var(--dds-typo-caption-font-size);}
+.dds-input[data-label-placement="inside"]:not(:focus-within):not([data-filled]):not(:has(input:-webkit-autofill)) .dds-input__control::placeholder {color:transparent;}
+.dds-input[data-label-placement="inside"] .dds-input__clear {inset-block-end:var(--dds-space-12);}
+.dds-input__control[type="search"]::-webkit-search-cancel-button {appearance:none;}
+.dds-input-group {display:flex;align-items:flex-end;gap:var(--dds-space-8);inline-size:100%;min-inline-size:0;color:var(--dds-color-text-primary);}
+.dds-input-group > .dds-input {flex:1;min-inline-size:0;}
+.dds-input-group__start,.dds-input-group__end {display:flex;align-items:center;justify-content:center;flex:none;min-block-size:var(--dds-space-40);color:var(--dds-color-text-secondary);}
+@media (pointer:coarse) {.dds-input__control {min-block-size:44px;}.dds-input__clear {inline-size:44px;block-size:44px;inset-block-end:0;inset-inline-end:0;}.dds-input[data-label-placement="inside"] .dds-input__clear {inset-block-end:var(--dds-space-4);}}

package/dist/components/menu.css

@@ -0,0 +1,9 @@
+/* Dialog currently occupies layer 1000. Consumers can set the common overlay layer within a custom shell. */
+.dds-menu-positioner,.dds-popover-positioner,.dds-choice-positioner,.dds-date-picker-positioner {z-index:var(--dds-overlay-z-index,1001);color:var(--dds-color-text-primary);}
+.dds-menu {box-sizing:border-box;min-inline-size:180px;max-inline-size:calc(100vw - var(--dds-space-32));max-block-size:var(--available-height,80vh);overflow:auto;padding:var(--dds-space-4);border:1px solid var(--dds-color-border-default);border-radius:var(--dds-radius-md);background:var(--dds-color-bg-elevated);color:var(--dds-color-text-primary);box-shadow:var(--dds-elevation-2);font-family:var(--dds-font-family-sans);font-size:var(--dds-typo-body-2-font-size);}
+.dds-menu [role^="menuitem"] {display:flex;align-items:center;gap:var(--dds-space-8);min-block-size:var(--dds-space-40);padding-inline:var(--dds-space-12);border-radius:var(--dds-radius-sm);cursor:pointer;outline:none;text-decoration:none;color:inherit;}
+.dds-menu [role^="menuitem"][data-highlighted] {background:var(--dds-color-bg-brand-subtle);}
+.dds-menu [data-disabled] {opacity:.45;cursor:not-allowed;}
+.dds-menu [data-part="item-group-label"] {padding:var(--dds-space-8) var(--dds-space-12);font-size:var(--dds-typo-caption-font-size);font-weight:600;color:var(--dds-color-text-secondary);}
+.dds-menu [role="separator"] {block-size:1px;background:var(--dds-color-border-default);margin-block:var(--dds-space-4);}
+@media(pointer:coarse){.dds-menu [role^="menuitem"]{min-block-size:44px;}}

package/dist/components/popover.css

@@ -0,0 +1,3 @@
+.dds-popover {box-sizing:border-box;inline-size:max-content;max-inline-size:calc(100vw - var(--dds-space-32));max-block-size:var(--available-height,80vh);overflow:auto;padding:var(--dds-space-16);border:1px solid var(--dds-color-border-default);border-radius:var(--dds-radius-md);background:var(--dds-color-bg-elevated);color:var(--dds-color-text-primary);box-shadow:var(--dds-elevation-2);font-family:var(--dds-font-family-sans);font-size:var(--dds-typo-body-2-font-size);}
+.dds-popover [data-part="title"] {margin:0 0 var(--dds-space-8);font-size:var(--dds-typo-title-3-font-size);}
+.dds-popover [data-part="description"] {margin-block-end:var(--dds-space-12);color:var(--dds-color-text-secondary);}

package/dist/components/toast.css

@@ -31,10 +31,23 @@
   border-radius: var(--dds-radius-md);
   box-shadow: var(--dds-elevation-2);
   padding: var(--dds-space-12) var(--dds-space-16);
+  /* Ark (Zag) places every toast absolutely inside the region, and the region
+   * has no in-flow content, so it is zero-wide. Without its own width a toast
+   * shrink-wraps to that and wraps every few characters. Take the text's width
+   * up to the cap, pinned to the region's end edge (logical, so RTL holds). */
+  width: max-content;
+  inset-inline-end: 0;
   max-width: min(360px, calc(100vw - var(--dds-space-32)));
   animation: dds-toast-in var(--dds-motion-duration-base) var(--dds-motion-easing-enter);
 }
 
+/* A long unbroken string (a URL, an ID) wraps inside the box instead of
+ * pushing past it. Word breaking for a language stays the product's root rule. */
+.dds-toast [data-part="description"] {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
 .dds-toast--success::before,
 .dds-toast--warning::before,
 .dds-toast--danger::before,

package/dist/dds.css

@@ -302,6 +302,31 @@
   color: var(--dds-color-status-danger);
 }
 
+/* Attribute scoping preserves the existing native input.dds-input contract. */
+.dds-input[data-label-placement] {position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--dds-space-4);inline-size:100%;block-size:auto;height:auto;padding:0;border:0;background:transparent;color:var(--dds-color-text-primary);}
+.dds-input__label {font-size:var(--dds-typo-label-font-size);line-height:var(--dds-typo-label-line-height);font-weight:var(--dds-typo-label-font-weight);}
+.dds-input__control {box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--dds-space-40);padding-inline:var(--dds-space-12);font:inherit;background:var(--dds-color-bg-default);color:var(--dds-color-text-primary);border:1px solid var(--dds-color-border-strong);border-radius:var(--dds-radius-md);}
+.dds-input__control::placeholder {color:var(--dds-color-text-muted);}
+.dds-input__control:focus-visible {outline:var(--dds-space-2) solid var(--dds-color-border-focus);outline-offset:0;}
+.dds-input__control[aria-invalid="true"] {border-color:var(--dds-color-status-danger);}
+.dds-input:has(.dds-input__clear) .dds-input__control {padding-inline-end:var(--dds-space-48);}
+.dds-input__clear {position:absolute;inset-inline-end:var(--dds-space-4);inset-block-end:var(--dds-space-4);display:grid;place-items:center;inline-size:var(--dds-space-32);block-size:var(--dds-space-32);padding:0;border:0;border-radius:var(--dds-radius-sm);background:transparent;color:var(--dds-color-text-secondary);font:inherit;cursor:pointer;}
+.dds-input__clear:hover {background:var(--dds-color-bg-subtle);}
+.dds-input__clear:focus-visible {outline:var(--dds-space-2) solid var(--dds-color-border-focus);outline-offset:var(--dds-space-2);}
+.dds-input[data-disabled] {opacity:.45;cursor:not-allowed;}
+.dds-input[data-disabled] .dds-input__control {cursor:not-allowed;background:var(--dds-color-bg-subtle);}
+.dds-input[data-label-placement="hidden"] .dds-input__label {position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
+.dds-input[data-label-placement="inside"] .dds-input__control {block-size:calc(var(--dds-space-40) + var(--dds-space-16));padding-block:var(--dds-space-20) var(--dds-space-4);}
+.dds-input[data-label-placement="inside"] .dds-input__label {position:absolute;inset-inline-start:var(--dds-space-12);inset-block-start:var(--dds-space-20);pointer-events:none;color:var(--dds-color-text-secondary);}
+.dds-input[data-label-placement="inside"]:is(:focus-within,[data-filled],:has(input:-webkit-autofill)) .dds-input__label {inset-block-start:var(--dds-space-4);font-size:var(--dds-typo-caption-font-size);}
+.dds-input[data-label-placement="inside"]:not(:focus-within):not([data-filled]):not(:has(input:-webkit-autofill)) .dds-input__control::placeholder {color:transparent;}
+.dds-input[data-label-placement="inside"] .dds-input__clear {inset-block-end:var(--dds-space-12);}
+.dds-input__control[type="search"]::-webkit-search-cancel-button {appearance:none;}
+.dds-input-group {display:flex;align-items:flex-end;gap:var(--dds-space-8);inline-size:100%;min-inline-size:0;color:var(--dds-color-text-primary);}
+.dds-input-group > .dds-input {flex:1;min-inline-size:0;}
+.dds-input-group__start,.dds-input-group__end {display:flex;align-items:center;justify-content:center;flex:none;min-block-size:var(--dds-space-40);color:var(--dds-color-text-secondary);}
+@media (pointer:coarse) {.dds-input__control {min-block-size:44px;}.dds-input__clear {inline-size:44px;block-size:44px;inset-block-end:0;inset-inline-end:0;}.dds-input[data-label-placement="inside"] .dds-input__clear {inset-block-end:var(--dds-space-4);}}
+
 /* Textarea — the multi-line member of the TextField family: it lives in the
  * same .dds-field wrapper and shares label/help/error behavior with .dds-input.
  * Row rule from the house UI discipline: a textarea gets its own row, never a
@@ -412,6 +437,34 @@
   pointer-events: none;
 }
 
+.dds-choice {display:flex;flex-direction:column;gap:var(--dds-space-4);position:relative;min-inline-size:0;font-family:var(--dds-font-family-sans);font-size:var(--dds-typo-body-2-font-size);color:var(--dds-color-text-primary);}
+.dds-choice-label {font-size:var(--dds-typo-label-font-size);line-height:var(--dds-typo-label-line-height);font-weight:var(--dds-typo-label-font-weight);}
+.dds-choice-control {position:relative;display:flex;align-items:center;inline-size:100%;min-block-size:var(--dds-space-40);border:1px solid var(--dds-color-border-strong);border-radius:var(--dds-radius-md);background:var(--dds-color-bg-default);}
+.dds-choice-control:focus-within {outline:var(--dds-space-2) solid var(--dds-color-border-focus);}
+.dds-choice-input,.dds-choice-trigger {box-sizing:border-box;min-inline-size:0;min-block-size:var(--dds-space-40);border:0;background:transparent;color:inherit;font:inherit;padding-inline:var(--dds-space-12);}
+.dds-choice-input {flex:1;inline-size:100%;outline:none;}
+.dds-choice-trigger {cursor:pointer;text-align:start;}
+.dds-choice-control > .dds-choice-trigger:first-child {inline-size:100%;}
+.dds-choice-clear {flex:none;min-inline-size:var(--dds-space-32);min-block-size:var(--dds-space-32);padding:var(--dds-space-4);border:0;border-radius:var(--dds-radius-sm);background:transparent;color:var(--dds-color-text-secondary);cursor:pointer;}
+.dds-choice-content {box-sizing:border-box;min-inline-size:var(--reference-width);max-inline-size:calc(100vw - var(--dds-space-32));max-block-size:min(320px,var(--available-height,320px));overflow:auto;padding:var(--dds-space-4);background:var(--dds-color-bg-elevated);color:var(--dds-color-text-primary);border:1px solid var(--dds-color-border-default);border-radius:var(--dds-radius-md);box-shadow:var(--dds-elevation-2);font-family:var(--dds-font-family-sans);font-size:var(--dds-typo-body-2-font-size);}
+.dds-choice-item {box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;min-block-size:var(--dds-space-40);padding-inline:var(--dds-space-12);border-radius:var(--dds-radius-sm);cursor:pointer;outline:none;overflow:hidden;white-space:nowrap;}
+.dds-choice-item[data-highlighted] {background:var(--dds-color-bg-brand-subtle);}
+.dds-choice-item[data-state="checked"],.dds-choice-item[data-selected] {font-weight:600;}
+.dds-choice-item[data-disabled] {opacity:.45;cursor:not-allowed;}
+.dds-choice-description {font-size:var(--dds-typo-caption-font-size);color:var(--dds-color-text-secondary);overflow:hidden;text-overflow:ellipsis;}
+.dds-choice-status {padding:var(--dds-space-12);color:var(--dds-color-text-secondary);}
+.dds-choice-status:empty {padding:0;}
+.dds-choice-validation {position:absolute;inline-size:1px;block-size:1px;padding:0;border:0;clip-path:inset(50%);overflow:hidden;}
+.dds-choice[data-label-placement="hidden"] .dds-choice-label {position:absolute;inline-size:1px;block-size:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap;}
+.dds-choice[data-label-placement="inside"] .dds-choice-label {position:absolute;z-index:1;inset-inline-start:var(--dds-space-12);inset-block-start:var(--dds-space-20);pointer-events:none;color:var(--dds-color-text-secondary);}
+.dds-choice[data-label-placement="inside"] .dds-choice-control {min-block-size:calc(var(--dds-space-40) + var(--dds-space-16));}
+.dds-choice[data-label-placement="inside"] :is(.dds-choice-input,.dds-choice-trigger) {padding-block-start:var(--dds-space-16);}
+.dds-choice[data-label-placement="inside"]:is(:focus-within,[data-has-value]) .dds-choice-label {inset-block-start:var(--dds-space-4);font-size:var(--dds-typo-caption-font-size);}
+.dds-choice[data-label-placement="inside"]:not(:focus-within):not([data-has-value]) .dds-choice-input::placeholder {color:transparent;}
+.dds-choice[data-label-placement="inside"]:not(:focus-within):not([data-has-value]) .dds-choice-value {visibility:hidden;}
+.dds-choice[data-disabled] {opacity:.45;}
+@media(pointer:coarse){.dds-choice-input,.dds-choice-trigger,.dds-choice-clear {min-block-size:44px;min-inline-size:44px;}}
+
 /* Checkbox / Radio — one class for both; the input's own type decides the
  * shape (square + tick vs circle + dot), so markup never has to declare the
  * shape twice. The control stays a real <input> (keyboard, form data, AT
@@ -1060,6 +1113,20 @@ dialog.dds-dialog::backdrop {
   gap: var(--dds-space-8);
 }
 
+/* Dialog currently occupies layer 1000. Consumers can set the common overlay layer within a custom shell. */
+.dds-menu-positioner,.dds-popover-positioner,.dds-choice-positioner,.dds-date-picker-positioner {z-index:var(--dds-overlay-z-index,1001);color:var(--dds-color-text-primary);}
+.dds-menu {box-sizing:border-box;min-inline-size:180px;max-inline-size:calc(100vw - var(--dds-space-32));max-block-size:var(--available-height,80vh);overflow:auto;padding:var(--dds-space-4);border:1px solid var(--dds-color-border-default);border-radius:var(--dds-radius-md);background:var(--dds-color-bg-elevated);color:var(--dds-color-text-primary);box-shadow:var(--dds-elevation-2);font-family:var(--dds-font-family-sans);font-size:var(--dds-typo-body-2-font-size);}
+.dds-menu [role^="menuitem"] {display:flex;align-items:center;gap:var(--dds-space-8);min-block-size:var(--dds-space-40);padding-inline:var(--dds-space-12);border-radius:var(--dds-radius-sm);cursor:pointer;outline:none;text-decoration:none;color:inherit;}
+.dds-menu [role^="menuitem"][data-highlighted] {background:var(--dds-color-bg-brand-subtle);}
+.dds-menu [data-disabled] {opacity:.45;cursor:not-allowed;}
+.dds-menu [data-part="item-group-label"] {padding:var(--dds-space-8) var(--dds-space-12);font-size:var(--dds-typo-caption-font-size);font-weight:600;color:var(--dds-color-text-secondary);}
+.dds-menu [role="separator"] {block-size:1px;background:var(--dds-color-border-default);margin-block:var(--dds-space-4);}
+@media(pointer:coarse){.dds-menu [role^="menuitem"]{min-block-size:44px;}}
+
+.dds-popover {box-sizing:border-box;inline-size:max-content;max-inline-size:calc(100vw - var(--dds-space-32));max-block-size:var(--available-height,80vh);overflow:auto;padding:var(--dds-space-16);border:1px solid var(--dds-color-border-default);border-radius:var(--dds-radius-md);background:var(--dds-color-bg-elevated);color:var(--dds-color-text-primary);box-shadow:var(--dds-elevation-2);font-family:var(--dds-font-family-sans);font-size:var(--dds-typo-body-2-font-size);}
+.dds-popover [data-part="title"] {margin:0 0 var(--dds-space-8);font-size:var(--dds-typo-title-3-font-size);}
+.dds-popover [data-part="description"] {margin-block-end:var(--dds-space-12);color:var(--dds-color-text-secondary);}
+
 /* Toast — transient notice. Region markup:
  *   .dds-toast-region[role="status"] (polite) — use role="alert" per-toast
  *   only for danger. Toasts stack bottom-end; entry animates with
@@ -1093,10 +1160,23 @@ dialog.dds-dialog::backdrop {
   border-radius: var(--dds-radius-md);
   box-shadow: var(--dds-elevation-2);
   padding: var(--dds-space-12) var(--dds-space-16);
+  /* Ark (Zag) places every toast absolutely inside the region, and the region
+   * has no in-flow content, so it is zero-wide. Without its own width a toast
+   * shrink-wraps to that and wraps every few characters. Take the text's width
+   * up to the cap, pinned to the region's end edge (logical, so RTL holds). */
+  width: max-content;
+  inset-inline-end: 0;
   max-width: min(360px, calc(100vw - var(--dds-space-32)));
   animation: dds-toast-in var(--dds-motion-duration-base) var(--dds-motion-easing-enter);
 }
 
+/* A long unbroken string (a URL, an ID) wraps inside the box instead of
+ * pushing past it. Word breaking for a language stays the product's root rule. */
+.dds-toast [data-part="description"] {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
 .dds-toast--success::before,
 .dds-toast--warning::before,
 .dds-toast--danger::before,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devslab/dds-css",
-  "version": "0.21.2",
+  "version": "0.22.1",
   "description": "DDS CSS component layer — class-based, framework-neutral, semantic-token-only (spec §4.3 v1 inventory, 20 components)",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE",