@0001-labs/design-system-1 0.3.0-alpha.28 → 0.3.1

package/DS1/2-core/styles/ds-tag.css

@@ -7,22 +7,50 @@
   max-width: 100%;
   min-width: 0;
   vertical-align: bottom;
+  /* The tag's own tokens, unset by default and in unscaled px: its height, side padding,
+     corners and text size; --ds-tag-accent colours it. */
+  --_tag-size: var(--ds-tag-size);
+  --_tag-height: calc(var(--_tag-size) * var(--ds-sf, 1));
+  --_tag-padding-size: var(--ds-tag-padding-size);
+  --_tag-padding: calc(var(--_tag-padding-size) * var(--ds-sf, 1));
+  --_tag-corner-size: var(--ds-tag-corner-size);
+  --_tag-radius: calc(var(--_tag-corner-size) * var(--ds-sf, 1));
+  --_tag-text-size: var(--ds-tag-text-size);
+  --_tag-font-size: calc(var(--_tag-text-size) * var(--ds-sf, 1));
 }
 :host([hidden]) { display: none !important; }
+/* The face stays one control high at the foot of its box, on the lower sixteen,
+   even when a row stretches the tag to a square. */
 .frame {
   display: block;
+  align-self: flex-end;
   box-sizing: border-box;
   max-width: 100%;
-  padding-inline: calc(4px * var(--ds-sf, 1));
-  border-radius: var(--ds-radius);
+  padding-inline: var(--_tag-padding, calc(4px * var(--ds-sf, 1)));
+  border-radius: var(--_tag-radius, var(--ds-radius));
   background: var(--ds-tag-background, light-dark(color-mix(in srgb, var(--ds-tag-accent, var(--ds-grey, #7a7a7a)) 28%, white), color-mix(in srgb, var(--ds-tag-accent, var(--ds-grey, #7a7a7a)) 20%, var(--ds-black, #2a2a2a))));
-  color: var(--ds-tag-color, light-dark(color-mix(in srgb, var(--ds-tag-accent, var(--ds-grey, #7a7a7a)) 45%, black), var(--ds-tag-accent, var(--ds-grey, #7a7a7a))));
+  /* Tint the dark-mode ink: raw grey/accent colours cannot meet 4.5:1 on this fill. */
+  color: var(--ds-tag-color, light-dark(color-mix(in srgb, var(--ds-tag-accent, var(--ds-grey, #7a7a7a)) 45%, black), color-mix(in srgb, var(--ds-tag-accent, var(--ds-grey, #7a7a7a)) 30%, white)));
   font-family: var(--ds-typeface-regular);
   font-feature-settings: var(--ds-font-features);
-  font-size: var(--ds-type-size-default);
-  line-height: var(--ds-control-height);
+  font-size: var(--_tag-font-size, var(--ds-type-size-default));
+  line-height: var(--_tag-height, var(--ds-control-height));
   letter-spacing: var(--ds-type-letterspacing-default);
   overflow: hidden;
-  text-overflow: ellipsis;
+  text-overflow: clip;
   white-space: nowrap;
 }
+/* The words in a box of their own, so cut words fade over their last square
+   while the fill stays whole; never an ellipsis (0-face/cut-fade.ts marks them). */
+.words {
+  display: block;
+  overflow: hidden;
+  text-overflow: clip;
+  white-space: nowrap;
+}
+.words[data-cut="end"] {
+  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);
+}
+:host(:dir(rtl)) .words[data-cut="end"] {
+  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);
+}

package/DS1/2-core/styles/ds-text.css

@@ -16,10 +16,11 @@
   line-height: var(--ds-type-lineheight-default);
   letter-spacing: var(--ds-type-letterspacing-default);
   text-align: left;
-  text-transform: var(--text-transform-default);
-  text-decoration: var(--text-decoration-default);
   vertical-align: middle;
   white-space: nowrap;
+  word-break: normal;
+  overflow-wrap: normal;
+  hyphens: manual;
   color: var(--ds-text-tone, inherit);
 }
 :host([hidden]) { display: none !important; }
@@ -43,7 +44,9 @@
   color: inherit;
 }
 
-/* Text someone wrote: shown as it stands, cut with an ellipsis at its width. */
+/* Text someone wrote: shown as it stands. Cut at its width, it fades over its
+   last square, never an ellipsis: the element marks itself `data-cut="end"`
+   while its words do not fit (0-face/cut-fade.ts). */
 :host([literal]) {
   height: auto;
   min-height: var(--ds-control-height);
@@ -57,9 +60,15 @@
   font-weight: var(--ds-type-weight-default);
   line-height: var(--ds-type-lineheight-default);
   letter-spacing: var(--ds-type-letterspacing-default);
-  text-overflow: ellipsis;
+  text-overflow: clip;
   white-space: nowrap;
 }
+:host([literal]:not([wrap])[data-cut="end"]) {
+  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);
+}
+:host([literal]:not([wrap])[data-cut="end"]:dir(rtl)) {
+  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);
+}
 
 /*
  * Tone, size, strength and wrapping work alike for a translation key and for

package/DS1/2-core/styles/ds-token.css

@@ -3,7 +3,10 @@
 :host([hidden]) { display: none !important; }
 .frame { display: flex; align-items: center; box-sizing: border-box; max-width: 100%; min-width: 0; height: var(--ds-row-height); padding-inline-start: calc(4px * var(--ds-sf)); background: var(--ds-fill); color: var(--ds-text-color); border-radius: var(--ds-radius); font-family: var(--ds-typeface-regular); font-size: var(--ds-type-size-default); line-height: var(--ds-type-lineheight-default); letter-spacing: var(--ds-type-letterspacing-default); }
 .copy { display: flex; align-items: baseline; gap: calc(4px * var(--ds-sf)); min-width: 0; padding-inline: calc(4px * var(--ds-sf)); }
-.copy > span, small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.copy > span, small { overflow: hidden; text-overflow: clip; white-space: nowrap; min-width: 0; }
+/* Cut words fade over their last square, never an ellipsis (0-face/cut-fade.ts marks them). */
+:is(.copy > span, small)[data-cut="end"] { mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent); }
+:host(:dir(rtl)) :is(.copy > span, small)[data-cut="end"] { mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent); }
 small { font-size: var(--ds-type-size-small); color: var(--ds-text-color-muted); }
 ds-button { flex: 0 0 auto; --ds-button-height: var(--ds-row-height); --ds-button-width: var(--ds-row-height); }
 ::slotted([slot="leading"]) { flex: 0 0 auto; }

package/DS1/2-core/styles/ds-tooltip.css

@@ -5,13 +5,19 @@
 }
 :host([hidden]) { display: none !important; }
 
+/* In the top layer (a manual popover), fixed over its control by the box
+ * ds-tooltip.ts measures: centred, two pixels above, shifted to stay four
+ * pixels inside the window; nothing the control stands in can cut it short. */
 .bubble {
   box-sizing: border-box;
-  position: absolute;
-  left: 50%;
-  bottom: calc(100% + 2px * var(--ds-sf, var(--sf, 1)));
-  /* Centred over its control, shifted to stay four pixels inside the window (ds-tooltip.ts). */
-  transform: translateX(calc(-50% + var(--ds-tooltip-shift, 0px)));
+  position: fixed;
+  inset: auto;
+  left: var(--ds-tooltip-x, 50%);
+  top: var(--ds-tooltip-above, auto);
+  margin: 0;
+  border: 0;
+  overflow: visible;
+  transform: translate(calc(-50% + var(--ds-tooltip-shift, 0px)), -100%);
   z-index: var(--ds-tooltip-z-index, 1000);
   width: max-content;
   max-width: min(calc(320px * var(--ds-sf, var(--sf, 1))), calc(100vw - 20px));
@@ -34,6 +40,6 @@
 .bubble[hidden] { display: none; }
 
 .bubble[data-side="bottom"] {
-  bottom: auto;
-  top: calc(100% + 2px * var(--ds-sf, var(--sf, 1)));
+  top: var(--ds-tooltip-below, auto);
+  transform: translateX(calc(-50% + var(--ds-tooltip-shift, 0px)));
 }

package/DS1/3-unit/calendar-base.ts

@@ -1,5 +1,5 @@
 // calendar-base.ts
-// What ds-calendar and ds-calendar-large share: the days a person may reach,
+// What ds-calendar's month, picker and activity share: the days a person may reach,
 // today, the selected day, the week's start, events, words in the current
 // language and the grid's keys. Each element draws its own grid; the month
 // calendar lays weeks in rows, the large calendar weeks in columns, and the
@@ -81,6 +81,7 @@ export abstract class CalendarBase extends LitElement {
     label: { type: String },
     literal: { type: Boolean, reflect: true },
     events: { attribute: false },
+    dayAllowed: { attribute: false },
     focusDay: { state: true },
     hoverDay: { state: true },
     endPending: { state: true },
@@ -92,6 +93,8 @@ export abstract class CalendarBase extends LitElement {
   declare min: string | undefined;
   /** The last day a person may choose. */
   declare max: string | undefined;
+  /** Which days between min and max a person may choose, such as the days with room left; every one when left out. Set a new function to draw the days again. */
+  declare dayAllowed: ((day: Day) => boolean) | undefined;
   /** The day drawn as today; the reader's own today when left out. */
   declare today: string | undefined;
   /** The first day of the week: `0`–`6` from Sunday, or a day's English name; the language's own when left out. */
@@ -177,7 +180,7 @@ export abstract class CalendarBase extends LitElement {
 
   /** Whether a person may choose the day. */
   protected allowed(day: Day): boolean {
-    return clampDay(day, this.minDay, this.maxDay) === day;
+    return clampDay(day, this.minDay, this.maxDay) === day && (this.dayAllowed?.(day) ?? true);
   }
 
   /** The chosen days: the first and the last of a range, or the one day twice. */

package/DS1/3-unit/context-trigger.ts

@@ -29,6 +29,7 @@ export function bindContextMenuTrigger(
   let suppressed: HTMLElement | null = null;
   let release: ReturnType<typeof setTimeout> | undefined;
   let disposed = false;
+  let mousePress: { event: PointerEvent; path: EventTarget[]; target: EventTarget | null } | undefined;
   if (aria) trigger.setAttribute("aria-haspopup", "menu");
   if (selection) trigger.classList.add("ds-context-trigger");
   const enabled = (control: HTMLElement) => control.isConnected &&
@@ -48,6 +49,7 @@ export function bindContextMenuTrigger(
     release = setTimeout(clearSuppression, 1000);
   };
   const cancel = () => {
+    mousePress = undefined;
     clearTimeout(timer); timer = undefined; point = undefined;
     doc.removeEventListener("pointermove", move);
     doc.removeEventListener("pointerup", cancel);
@@ -56,10 +58,28 @@ export function bindContextMenuTrigger(
   };
   const context = (event: MouseEvent) => {
     if (event.defaultPrevented) return;
-    const control = resolve(event); if (!control || !enabled(control)) return;
+    // Settling a transform on pointerdown can move another row beneath the
+    // pointer before Chromium hit-tests contextmenu. Keep the initiating row.
+    const pressed = mousePress;
+    mousePress = undefined;
+    const followsPress = pressed && event.button === 2 && Math.hypot(event.clientX - pressed.event.clientX, event.clientY - pressed.event.clientY) <= 10;
+    // Native events lose their composed path after dispatch. Delegated and
+    // shadow-root controls still need the original path and unretargeted target.
+    const gesture = followsPress ? new Proxy(pressed.event, {
+      get(target, key) {
+        if (key === "composedPath") return () => pressed.path;
+        if (key === "target") return pressed.target;
+        const value = Reflect.get(target, key, target);
+        return typeof value === "function" ? value.bind(target) : value;
+      },
+    }) : event;
+    // Adopted controls retain their creating realm’s prototype; ownerDocument
+    // alone cannot choose an instanceof constructor. Containment stays authoritative.
+    if (gesture !== event && (typeof (gesture.target as Node | null)?.nodeType !== "number" || !trigger.contains(gesture.target as Node))) return;
+    const control = resolve(gesture); if (!control || !enabled(control)) return;
     cancel();
     if (suppressed === control) { event.preventDefault(); return; }
-    if (open({ x: event.clientX, y: event.clientY }, control, event) === false) return;
+    if (open({ x: event.clientX, y: event.clientY }, control, gesture) === false) return;
     event.preventDefault();
     if (selection && event.button === 0) arm(control);
   };
@@ -88,6 +108,11 @@ export function bindContextMenuTrigger(
       if (open(at, control, event) !== false) arm(control);
     }, LONG_PRESS);
   };
+  const rememberMouse = (event: PointerEvent) => {
+    mousePress = !event.defaultPrevented && event.pointerType === "mouse" && event.button === 2 ? { event, path: event.composedPath(), target: event.target } : undefined;
+  };
+  trigger.addEventListener("pointerdown", rememberMouse, true);
+  trigger.addEventListener("pointercancel", cancel, true);
   trigger.addEventListener("contextmenu", context);
   trigger.addEventListener("keydown", key);
   trigger.addEventListener("pointerdown", press);
@@ -98,6 +123,8 @@ export function bindContextMenuTrigger(
       trigger.removeEventListener("contextmenu", context);
       trigger.removeEventListener("keydown", key);
       trigger.removeEventListener("pointerdown", press);
+      trigger.removeEventListener("pointerdown", rememberMouse, true);
+      trigger.removeEventListener("pointercancel", cancel, true);
       if (aria) {
         if (previousAria === null) trigger.removeAttribute("aria-haspopup"); else trigger.setAttribute("aria-haspopup", previousAria);
       }