@starci/grammar 0.4.12 → 0.5.0

package/dist/offset-pop/components-forms.css

@@ -0,0 +1,405 @@
+/*
+ * Offset Pop treatment for the Common form and input renderers.
+ *
+ * The family signature applied to every control: a solid ink outline on the field box, the hard
+ * offset shadow as the focus and press vector (the same 0.25rem vector Button uses), the pink
+ * decision accent for checked / selected / on, and reduced motion removing every transform.
+ * Selectors target only hooks the form renderers emit (`data-component`, `data-grammar-*`) plus the
+ * vendor's own interaction state attributes (`data-selected`, `data-focus-visible`, `data-pressed`,
+ * `data-dragging`, `data-focused`, `data-invalid`).
+ */
+@layer starci-grammar-offset-pop {
+    /* --- Field anatomy --- */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-field="true"] {
+        --offset-pop-field-ring: var(--offset-pop-shadow-ink);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] :is([data-grammar-field="true"][data-grammar-invalid="true"], [data-grammar-field="true"][data-invalid="true"]) {
+        --offset-pop-field-ring: var(--offset-pop-critical);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-field="true"] [data-grammar-field-label] {
+        color: var(--foreground);
+        font-weight: 800;
+        letter-spacing: -.01em;
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-field="true"] [data-grammar-field-error] {
+        color: color-mix(in srgb, var(--offset-pop-critical) 65%, var(--offset-pop-ink));
+        font-weight: 800;
+    }
+
+    /*
+     * The raw critical is a FILL (3.57:1 as text on the canvas), so every place the vendor or Common
+     * paints the danger colour as TEXT reads the ink-mixed error colour instead: HeroUI field errors
+     * and error messages, invalid labels and their required mark, invalid date and time segments,
+     * danger list and menu options, and Common's required mark, field error, over-limit count and
+     * negative menu item. Re-declaring `--danger` on those elements reroutes each vendor rule.
+     */
+    .grammar-common-root[data-grammar-family="offset-pop"] :is(.field-error, .error-message, .label, .date-input-group__segment, .list-box-item--danger, .menu-item--danger, .starci-core-field-required, .starci-core-field-error, .starci-core-field-count, .starci-core-menu-item, .starci-core-step-marker) {
+        --danger: color-mix(in srgb, var(--offset-pop-critical) 65%, var(--offset-pop-ink));
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-field-count][data-grammar-invalid="true"] {
+        color: color-mix(in srgb, var(--offset-pop-critical) 65%, var(--offset-pop-ink));
+        font-weight: 800;
+    }
+
+    /* --- The field box: ink outline, surface paint, control radius --- */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Select"] [data-grammar-field-control="true"],
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="ComboBox"] [data-grammar-field-control="true"],
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="SearchField"] [data-grammar-field-control="true"],
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="NumberField"] [data-grammar-field-control="true"],
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="DateField"] [data-grammar-field-control="true"],
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="TimeField"] [data-grammar-field-control="true"],
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="DatePicker"] [data-grammar-field-control="true"],
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="DateRangePicker"] [data-grammar-field-control="true"],
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Textarea"] [data-grammar-field-control="true"],
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Field"] [data-grammar-field-control="true"] > :where(input, select, textarea),
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Input"] .starci-core-input-field {
+        border: var(--offset-pop-outline-width) solid var(--offset-pop-ink);
+        border-radius: var(--offset-pop-control-radius);
+        color: var(--offset-pop-ink);
+        background: var(--offset-pop-surface);
+        box-shadow: none;
+        transition:
+            transform var(--offset-pop-transition),
+            box-shadow var(--offset-pop-transition),
+            background-color var(--offset-pop-transition),
+            border-color var(--offset-pop-transition);
+    }
+
+    /* Focus: the hard offset shadow, ink by default, critical while invalid. */
+    .grammar-common-root[data-grammar-family="offset-pop"] :is([data-component="Select"], [data-component="ComboBox"], [data-component="SearchField"], [data-component="NumberField"], [data-component="DateField"], [data-component="TimeField"], [data-component="DatePicker"], [data-component="DateRangePicker"], [data-component="Textarea"]) [data-grammar-field-control="true"]:is(:focus-visible, :focus-within, [data-focus-visible="true"], [data-focus-within="true"]),
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Field"] [data-grammar-field-control="true"] > :where(input, select, textarea):focus-visible,
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Input"] .starci-core-input-field:focus-visible {
+        border-color: var(--offset-pop-ink);
+        box-shadow: var(--offset-pop-shadow-x) var(--offset-pop-shadow-x) 0 var(--offset-pop-field-ring, var(--offset-pop-shadow-ink));
+        outline: 2px solid transparent;
+    }
+
+    /* Press on a field-shaped trigger collapses the shadow into the travel, like Button. */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Select"] [data-grammar-field-control="true"][data-pressed="true"] {
+        box-shadow: 0 0 0 var(--offset-pop-shadow-ink);
+        transform: translate(var(--offset-pop-shadow-x), var(--offset-pop-shadow-x));
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] :is([data-component="Select"], [data-component="ComboBox"], [data-component="SearchField"], [data-component="NumberField"], [data-component="DateField"], [data-component="TimeField"], [data-component="DatePicker"], [data-component="DateRangePicker"], [data-component="Textarea"]):is([data-grammar-invalid="true"], [data-invalid="true"]) [data-grammar-field-control="true"],
+    .grammar-common-root[data-grammar-family="offset-pop"] :is([data-component="Slider"], [data-component="SegmentedControl"])[data-grammar-invalid="true"] [data-grammar-field-control="true"],
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Field"][data-grammar-invalid="true"] [data-grammar-field-control="true"] > :where(input, select, textarea) {
+        border-color: var(--offset-pop-critical);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] :is([data-component="Select"], [data-component="ComboBox"], [data-component="SearchField"], [data-component="NumberField"], [data-component="DateField"], [data-component="TimeField"], [data-component="DatePicker"], [data-component="DateRangePicker"], [data-component="Textarea"])[data-grammar-readonly="true"] [data-grammar-field-control="true"] {
+        border-style: dashed;
+        background: var(--offset-pop-surface-muted);
+    }
+
+    /* Disabled dimming stays the vendor's (one opacity, never compounded); the family drops its vectors. */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-field="true"][data-grammar-disabled="true"] {
+        cursor: not-allowed;
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-field="true"][data-grammar-disabled="true"] [data-grammar-field-control="true"],
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-field="true"][data-grammar-disabled="true"] [data-grammar-choice-control] {
+        box-shadow: none;
+        transform: none;
+    }
+
+    /* --- Choices: Checkbox, CheckboxGroup, RadioGroup, Switch --- */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Checkbox"] [data-grammar-choice-control],
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="CheckboxGroup"] [data-grammar-choice-control],
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="RadioGroup"] [data-grammar-choice-control],
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Switch"] [data-grammar-choice-control] {
+        border: var(--offset-pop-outline-width) solid var(--offset-pop-ink);
+        background: var(--offset-pop-surface);
+        box-shadow: var(--offset-pop-shadow-x) var(--offset-pop-shadow-x) 0 var(--offset-pop-shadow-ink);
+        transition:
+            transform var(--offset-pop-transition),
+            box-shadow var(--offset-pop-transition),
+            background-color var(--offset-pop-transition);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Checkbox"] [data-grammar-choice-control="checkbox"],
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="CheckboxGroup"] [data-grammar-choice-control="checkbox"] {
+        border-radius: 0.25rem;
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="RadioGroup"] [data-grammar-choice-control="radio"],
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Switch"] [data-grammar-choice-control="switch"] {
+        border-radius: 999px;
+    }
+
+    /* Checked / selected / on: the pink decision accent. */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Checkbox"]:is([data-selected="true"], [data-indeterminate="true"]) [data-grammar-choice-control],
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="CheckboxGroup"] [data-grammar-option]:is([data-selected="true"], [data-indeterminate="true"]) [data-grammar-choice-control],
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="RadioGroup"] [data-grammar-option][data-selected="true"] [data-grammar-choice-control],
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Switch"][data-selected="true"] [data-grammar-choice-control] {
+        border-color: var(--offset-pop-ink);
+        color: var(--accent-foreground);
+        background: var(--offset-pop-pink);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Switch"] [data-grammar-choice-control="switch"] > * {
+        border: var(--offset-pop-outline-width) solid var(--offset-pop-ink);
+        background: var(--offset-pop-surface);
+        box-shadow: none;
+    }
+
+    /* Focus: the family focus ring around the control; press: the shadow collapses into travel. */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-field="true"] [data-grammar-choice-target][data-focus-visible="true"] [data-grammar-choice-control],
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-field="true"] [data-grammar-choice-target]:focus-within:has(:focus-visible) [data-grammar-choice-control] {
+        outline: 2px solid var(--focus);
+        outline-offset: 0.25rem;
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-field="true"] [data-grammar-choice-target][data-pressed="true"] [data-grammar-choice-control] {
+        box-shadow: 0 0 0 var(--offset-pop-shadow-ink);
+        transform: translate(var(--offset-pop-shadow-x), var(--offset-pop-shadow-x));
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-field="true"]:is([data-grammar-invalid="true"], [data-invalid="true"]) [data-grammar-choice-control] {
+        border-color: var(--offset-pop-critical);
+    }
+
+    /* --- SegmentedControl: one outlined unit, pink selected segment --- */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="SegmentedControl"] [data-grammar-field-control="true"] {
+        overflow: clip;
+        border: var(--offset-pop-outline-width) solid var(--offset-pop-ink);
+        border-radius: var(--offset-pop-control-radius);
+        background: var(--offset-pop-surface);
+        box-shadow: var(--offset-pop-shadow-x) var(--offset-pop-shadow-x) 0 var(--offset-pop-shadow-ink);
+        transition:
+            transform var(--offset-pop-transition),
+            box-shadow var(--offset-pop-transition);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="SegmentedControl"] [data-grammar-option] {
+        border: 0;
+        border-radius: 0;
+        color: var(--offset-pop-ink);
+        background: transparent;
+        box-shadow: none;
+        font-weight: 800;
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="SegmentedControl"] [data-grammar-option] + [data-grammar-option] {
+        border-inline-start: var(--offset-pop-outline-width) solid var(--offset-pop-ink);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="SegmentedControl"] [data-grammar-option]:is([data-hovered="true"], :hover):not([data-selected="true"], [data-disabled="true"]) {
+        background: color-mix(in srgb, var(--offset-pop-yellow) 32%, transparent);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="SegmentedControl"] [data-grammar-option][data-selected="true"] {
+        color: var(--accent-foreground);
+        background: var(--offset-pop-pink);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="SegmentedControl"] [data-grammar-option][data-focus-visible="true"] {
+        outline: 2px solid var(--offset-pop-ink);
+        outline-offset: -0.25rem;
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="SegmentedControl"] [data-grammar-field-control="true"]:has([data-grammar-option][data-pressed="true"]) {
+        box-shadow: 0 0 0 var(--offset-pop-shadow-ink);
+        transform: translate(var(--offset-pop-shadow-x), var(--offset-pop-shadow-x));
+    }
+
+    /* --- ButtonGroup: one shadow for the unit, joined outlines --- */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="ButtonGroup"] {
+        border-radius: var(--radius);
+        box-shadow: var(--offset-pop-shadow-x) var(--offset-pop-shadow-x) 0 var(--offset-pop-shadow-ink);
+        transition:
+            transform var(--offset-pop-transition),
+            box-shadow var(--offset-pop-transition);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="ButtonGroup"] [data-component="Button"] {
+        box-shadow: none;
+        transform: none;
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="ButtonGroup"][data-grammar-orientation="horizontal"] [data-component="Button"] + [data-component="Button"] {
+        margin-inline-start: calc(-1 * var(--offset-pop-outline-width));
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="ButtonGroup"][data-grammar-orientation="vertical"] [data-component="Button"] + [data-component="Button"] {
+        margin-block-start: calc(-1 * var(--offset-pop-outline-width));
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="ButtonGroup"]:has([data-component="Button"]:active:not([disabled])) {
+        box-shadow: 0 0 0 var(--offset-pop-shadow-ink);
+        transform: translate(var(--offset-pop-shadow-x), var(--offset-pop-shadow-x));
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="ButtonGroup"][data-grammar-disabled="true"] {
+        box-shadow: none;
+        opacity: .56;
+    }
+
+    /* --- Slider: outlined track, pink fill, offset-shadow thumb --- */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Slider"] [data-grammar-field-control="true"] {
+        border: var(--offset-pop-outline-width) solid var(--offset-pop-ink);
+        border-radius: 999px;
+        background: var(--offset-pop-surface);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Slider"] [data-grammar-slider-fill] {
+        border-radius: 999px;
+        background: var(--offset-pop-pink);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Slider"] [data-grammar-slider-thumb] {
+        border: var(--offset-pop-outline-width) solid var(--offset-pop-ink);
+        background: var(--offset-pop-surface);
+        box-shadow: var(--offset-pop-shadow-x) var(--offset-pop-shadow-x) 0 var(--offset-pop-shadow-ink);
+        transition:
+            translate var(--offset-pop-transition),
+            box-shadow var(--offset-pop-transition);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Slider"] [data-grammar-slider-thumb][data-focus-visible="true"] {
+        outline: 2px solid var(--focus);
+        outline-offset: 0.25rem;
+    }
+
+    /* The vendor positions the thumb with `transform`; press travel uses `translate` so both compose. */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Slider"] [data-grammar-slider-thumb][data-dragging="true"] {
+        box-shadow: 0 0 0 var(--offset-pop-shadow-ink);
+        translate: var(--offset-pop-shadow-x) var(--offset-pop-shadow-x);
+    }
+
+    /* --- Popovers (list, calendar): a top surface with the hard shadow --- */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-popover] {
+        border: var(--offset-pop-outline-width) solid var(--offset-pop-ink);
+        border-radius: var(--offset-pop-control-radius);
+        color: var(--offset-pop-ink);
+        background: var(--offset-pop-surface);
+        box-shadow: var(--shadow-surface);
+    }
+
+    /*
+     * Select and ComboBox options are interactive rows: the vendor moves focus onto the option under
+     * the pointer, so `data-focused` is the hover wash too, and a keyboard-focused option adds the
+     * family ring on its own edge. The selected option is the pink soft fill with the pink leading
+     * edge and the text-safe accent label, the same selected row a ListBox draws.
+     */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-popover] [data-grammar-option] {
+        transition: background-color var(--offset-pop-transition);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-popover] [data-grammar-option][data-focused="true"]:not([data-selected="true"]) {
+        background: color-mix(in srgb, var(--offset-pop-yellow) 32%, transparent);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-popover] [data-grammar-option][data-focus-visible="true"] {
+        outline: 2px solid var(--focus);
+        outline-offset: 0;
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-popover] [data-grammar-option][data-selected="true"] {
+        background: var(--accent-soft);
+        color: var(--offset-pop-accent-text);
+        font-weight: 800;
+        box-shadow: inset 0.25rem 0 0 var(--offset-pop-pink);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-popover] [data-grammar-calendar-cell][data-selected="true"] {
+        color: var(--accent-foreground);
+        background: var(--offset-pop-pink);
+        font-weight: 800;
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-popover] [data-grammar-calendar-cell][data-focus-visible="true"] {
+        outline: 2px solid var(--offset-pop-ink);
+        outline-offset: 0;
+    }
+
+    /* --- FileDropzone --- */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="FileDropzone"] [data-grammar-field-control="true"] {
+        border: var(--offset-pop-outline-width) dashed var(--offset-pop-ink);
+        border-radius: var(--offset-pop-surface-radius);
+        color: var(--offset-pop-ink);
+        background: var(--offset-pop-surface);
+        font-weight: 700;
+        transition:
+            transform var(--offset-pop-transition),
+            box-shadow var(--offset-pop-transition),
+            background-color var(--offset-pop-transition);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="FileDropzone"] [data-grammar-field-control="true"][data-grammar-drag="over"] {
+        border-style: solid;
+        border-color: var(--offset-pop-pink);
+        background: var(--offset-pop-blush);
+        box-shadow: var(--offset-pop-shadow-x) var(--offset-pop-shadow-x) 0 var(--offset-pop-shadow-ink);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="FileDropzone"] [data-grammar-field-control="true"]:focus-within:has(:focus-visible) {
+        border-style: solid;
+        box-shadow: var(--offset-pop-shadow-x) var(--offset-pop-shadow-x) 0 var(--offset-pop-field-ring, var(--offset-pop-shadow-ink));
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="FileDropzone"][data-grammar-invalid="true"] [data-grammar-field-control="true"] {
+        border-color: var(--offset-pop-critical);
+    }
+
+    /* --- Fieldset and Form --- */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Fieldset"] [data-grammar-fieldset-legend] {
+        color: var(--foreground);
+        font-weight: 900;
+        letter-spacing: -.015em;
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Fieldset"][data-grammar-invalid="true"] [data-grammar-field-error] {
+        color: color-mix(in srgb, var(--offset-pop-critical) 65%, var(--offset-pop-ink));
+        font-weight: 800;
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Form"][data-grammar-pending="true"] {
+        cursor: progress;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-field="true"] [data-grammar-field-control="true"],
+        .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-field="true"] [data-grammar-choice-control],
+        .grammar-common-root[data-grammar-family="offset-pop"] [data-component="ButtonGroup"],
+        .grammar-common-root[data-grammar-family="offset-pop"] [data-component="FileDropzone"] [data-grammar-field-control="true"] {
+            transform: none;
+            transition: none;
+        }
+
+        .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Slider"] [data-grammar-slider-thumb] {
+            translate: none;
+            transition: none;
+        }
+
+        .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-popover] [data-grammar-option] {
+            transform: none;
+            transition: none;
+        }
+    }
+
+    @media (forced-colors: active) {
+        .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-field="true"] [data-grammar-field-control="true"],
+        .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-field="true"] [data-grammar-choice-control],
+        .grammar-common-root[data-grammar-family="offset-pop"] [data-component="ButtonGroup"],
+        .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Slider"] [data-grammar-slider-thumb],
+        .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-popover] {
+            border-color: CanvasText;
+            box-shadow: none;
+        }
+
+        .grammar-common-root[data-grammar-family="offset-pop"] :is([data-component="Select"], [data-component="ComboBox"], [data-component="SearchField"], [data-component="NumberField"], [data-component="DateField"], [data-component="TimeField"], [data-component="DatePicker"], [data-component="DateRangePicker"], [data-component="Textarea"]) [data-grammar-field-control="true"]:is(:focus-visible, :focus-within, [data-focus-visible="true"], [data-focus-within="true"]) {
+            outline: 2px solid Highlight;
+        }
+
+        .grammar-common-root[data-grammar-family="offset-pop"] [data-component="SegmentedControl"] [data-grammar-option][data-selected="true"],
+        .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-popover] [data-grammar-option][data-selected="true"],
+        .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-popover] [data-grammar-calendar-cell][data-selected="true"] {
+            color: HighlightText;
+            background: Highlight;
+        }
+    }
+}