@redseed/redseed-ui-tailwindcss 7.42.0 → 7.44.0

package/components/inline_editable_text.css

@@ -0,0 +1,127 @@
+/*
+    InlineEditableText — click-to-edit text that edits in place.
+
+    These rules are structural only: the component deliberately sets NO
+    typography — font/color/line-height are inherited from context. Do not
+    introduce colour/typography here.
+
+    Layout stability (must not shift the text on hover/edit/save/tick):
+      - reserved-width adornment slot: a min-width floor (em-based, scales with
+        the inherited font size) that affordance/spinner/tick share, so swapping
+        them never reflows the text yet a larger consumer icon can still breathe,
+      - opacity-only hover reveal (never display/width change), split on @media (hover: hover),
+      - inline-grid auto-grow sizer whose hidden ::after mirror carries data-value.
+*/
+.rsui-inline-editable-text {
+    display: inline;
+    /* Read-only default: an inert label. Text stays selectable, but the cursor
+       is the arrow, not the browser's default text I-beam. The --editable
+       modifier below overrides this to a pointer. */
+    cursor: default;
+}
+
+.rsui-inline-editable-text--editable {
+    cursor: pointer;
+}
+
+/* Keyboard focus indicator for the role="button" editable control (WCAG 2.4.7).
+   outline (not box-shadow) so it follows inline text fragments if the value
+   wraps. Colour is inherited via currentColor to honour the no-colour rule. */
+.rsui-inline-editable-text--editable:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+    border-radius: 0.125em;
+}
+
+.rsui-inline-editable-text__value--placeholder {
+    /* Dim the placeholder while keeping the inherited text colour — no semantic
+       colour token fits without overriding the deliberately-inherited colour. */
+    opacity: 0.6;
+}
+
+.rsui-inline-editable-text__adornment {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    /* em-based so the reserved slot scales with the inherited font size — a
+       heading gets a proportionally larger affordance, body text a smaller one,
+       matching the component's inherit-from-context typography.
+       min-width (not a hard width) reserves a comfortable floor so swapping
+       affordance/spinner/tick never shifts the text, while still letting a
+       larger icon from another consuming app breathe rather than be clipped. */
+    min-width: 1.5em;
+    margin-left: 0.5em;
+    vertical-align: middle;
+}
+
+/* The component owns icon sizing (RSUI convention — see ButtonSlot): the
+   consumer just drops an icon component into the slot, sized here in em so it
+   scales with the surrounding typography. A 0.85em icon inside the 1.5em-min
+   slot always keeps breathing room. No per-consumer width/height. */
+.rsui-inline-editable-text__adornment svg {
+    width: 0.85em;
+    height: 0.85em;
+}
+
+/* Parent-surfaced failure message (optional #error slot). The one deliberate
+   colour exception — a failure signal needs the semantic error token, matching
+   the RSUI form-field error treatment (see rsui-form-field-slot__error). */
+.rsui-inline-editable-text__error {
+    @apply text-sm text-text-error;
+    margin-left: 0.5em;
+}
+
+.rsui-inline-editable-text__sizer {
+    display: inline-grid;
+    max-width: 100%;
+    min-width: 0;
+    vertical-align: top;
+}
+
+.rsui-inline-editable-text__sizer::after,
+.rsui-inline-editable-text__input {
+    grid-area: 1 / 1;
+    width: auto;
+    min-width: 0;
+    font: inherit;
+    color: inherit;
+    line-height: inherit;
+    white-space: normal;
+    overflow-wrap: break-word;
+}
+
+.rsui-inline-editable-text__sizer::after {
+    content: attr(data-value) " ";
+    visibility: hidden;
+}
+
+.rsui-inline-editable-text__input {
+    border: 0;
+    margin: 0;
+    padding: 0;
+    background: transparent;
+    outline: none;
+    resize: none;
+    overflow: hidden;
+}
+
+/*
+    On hover-capable devices the pencil affordance is calm — it fades in on
+    hover/focus and the value underlines, matching the meeting-title pattern.
+    On touch (no hover) the affordance stays visible as the only cue.
+*/
+@media (hover: hover) {
+    .rsui-inline-editable-text__affordance {
+        opacity: 0;
+        transition: opacity 0.15s ease-in-out;
+    }
+
+    .rsui-inline-editable-text--editable:hover .rsui-inline-editable-text__affordance,
+    .rsui-inline-editable-text--editable:focus-within .rsui-inline-editable-text__affordance {
+        opacity: 1;
+    }
+
+    .rsui-inline-editable-text--editable:hover .rsui-inline-editable-text__value {
+        text-decoration: underline;
+    }
+}

package/components/pill.css

@@ -0,0 +1,51 @@
+.rsui-pill {
+    /* Accent falls back to a neutral token when the consumer supplies no color. */
+    --rsui-pill-accent: var(--color-background-secondary-contrast);
+
+    @apply inline-flex items-center gap-2 w-fit h-fit shrink-0;
+    @apply rounded-full border border-border-secondary;
+    @apply px-3 py-1.5 select-none whitespace-nowrap cursor-pointer transition;
+    @apply text-sm font-medium leading-5;
+    @apply bg-background-primary text-text-secondary;
+
+    /* hover state */
+    @apply hover:bg-background-secondary;
+
+    /* focus state — mirrors button_slot (ring, cleared when disabled) */
+    @apply outline-hidden;
+    @apply focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-border-primary;
+    @apply disabled:focus-visible:ring-0;
+
+    /* disabled state */
+    @apply disabled:cursor-default disabled:bg-background-disabled disabled:text-text-disabled disabled:border-transparent;
+
+    & svg {
+        @apply size-5;
+    }
+}
+
+/* icon badge — solid accent fill with an on-color glyph */
+.rsui-pill__icon {
+    @apply inline-flex items-center justify-center shrink-0 size-6 rounded-full;
+    @apply text-text-on-color;
+    background-color: var(--rsui-pill-accent);
+}
+
+/* selected — a single accent ring (the halo) with the resting border cleared so
+   it doesn't stack into a heavy double outline (which read near-black on a dark
+   accent). The tinted fill carries the accent colour, and the label switches to
+   the stronger text-primary — a hue-INDEPENDENT contrast cue so selection still
+   reads on a pale accent where the ring/tint wash out. Selection is therefore
+   never signalled by colour alone (text-contrast + aria-pressed carry it), and
+   the text-colour swap shifts no layout. */
+.rsui-pill--selected {
+    @apply ring-2 ring-offset-0 text-text-primary;
+    --tw-ring-color: var(--rsui-pill-accent);
+    border-color: transparent;
+    background-color: color-mix(in srgb, var(--rsui-pill-accent) 16%, var(--color-background-primary));
+}
+
+/* disabled — neutralise the accent-driven badge fill */
+.rsui-pill--disabled .rsui-pill__icon {
+    background-color: var(--color-background-disabled-contrast);
+}

package/components.css

@@ -60,6 +60,7 @@ Please be careful when adding new components and updating the order.
 @import './components/image_64by25.css';
 @import './components/image_9by16.css';
 @import './components/image_circle.css';
+@import './components/inline_editable_text.css';
 @import './components/link_slot.css';
 @import './components/link_primary.css';
 @import './components/linked_list.css';
@@ -78,6 +79,7 @@ Please be careful when adding new components and updating the order.
 @import './components/pagination_item.css';
 @import './components/pagination_item_previous.css';
 @import './components/pagination_item_next.css';
+@import './components/pill.css';
 @import './components/progress_bar.css';
 @import './components/progress_circle.css';
 @import './components/progress_tracker.css';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-tailwindcss",
-    "version": "7.42.0",
+    "version": "7.44.0",
     "description": "RedSeed UI Tailwindcss",
     "main": "index.js",
     "style": "index.css",