@sankhyatronics/sankhya-cms 0.1.18 → 0.3.0

package/dist/attention-panel/index.js

@@ -1,7 +1,7 @@
 import {
   AttentionPanel
-} from "../chunk-35TX3AOA.js";
-import "../chunk-KMU6ABQF.js";
+} from "../chunk-NABSRUXG.js";
+import "../chunk-NXUS2CH7.js";
 import "../chunk-EUXUH3YW.js";
 export {
   AttentionPanel

package/dist/bar-chart/index.js

@@ -1,7 +1,7 @@
 import {
   BarChart
-} from "../chunk-AG2COC64.js";
-import "../chunk-KMU6ABQF.js";
+} from "../chunk-VVYQ2DDS.js";
+import "../chunk-NXUS2CH7.js";
 import "../chunk-EUXUH3YW.js";
 export {
   BarChart

package/dist/bento-grid/index.d.ts

@@ -3,6 +3,7 @@ import { LitElement } from 'lit';
 
 interface BentoGridItem {
     title: string;
+    /** Markdown. */
     description?: string;
     /** Iconify icon name, e.g. `mdi:home`. */
     icon?: string;
@@ -10,13 +11,44 @@ interface BentoGridItem {
     imageAlt?: string;
     colSpan?: 1 | 2 | 3 | 4;
     rowSpan?: 1 | 2;
-    /** Turns the card into a link. */
+    /** Without `actionLabel`, turns the whole card into a link. */
     href?: string;
+    /** `default` (surface), `primary` (brand fill, white text) or `dark` (navy fill, light text). */
+    variant?: 'default' | 'primary' | 'dark';
+    /** With `href`, renders a button-style link inside the card instead of linking the whole card. */
+    actionLabel?: string;
+    /** Accessible name of the action when its visible label repeats across cards (e.g. "See how: Controlled Outsourcing"). */
+    actionAriaLabel?: string;
+    /**
+     * Small rounded labels. On a full-width card (`colSpan: 4`) they sit in a 3-column grid to the
+     * right of the text; otherwise below it.
+     */
+    chips?: BentoGridChip[];
+    /** `stack` (default) puts the action under the text; `row` puts the text left and the action right. */
+    layout?: 'stack' | 'row';
+}
+interface BentoGridChip {
+    label: string;
+    /** `solid` navy with white text, `soft` light blue, `plain` the surface tint. Default `plain`. */
+    tone?: 'solid' | 'soft' | 'plain';
 }
 /**
  * A responsive 4-column bento grid of icon/image cards. Items are set via the `items` property.
+ * Descriptions are Markdown. A card links as a whole when it has `href` alone; with `actionLabel`
+ * the link becomes a button inside the card.
+ *
+ * A card that uses `chips` or `layout` takes the design-system look: a 32px padding, a 40px icon
+ * tile on a light blue (cyan on `primary` and `dark` cards), and on a `primary` card the action is a
+ * white navy-text pill. Cards without those options keep the original look.
  *
  * @cssprop --st-bento-grid-padding - Overrides the block's padding.
+ * @cssprop --st-bento-card-border - Overrides the colour of the cards' hairline border (default `--st-color-border`).
+ * @cssprop --st-bento-description-color - Colour of a design-system card's description (default `--st-cms-text`).
+ * @cssprop --st-bento-chip-soft-bg - Background of `soft` chips (default `--st-cms-primary-100`).
+ * @cssprop --st-bento-chip-plain-bg - Background of `plain` chips (default `--st-cms-surface-soft`).
+ * @cssprop --st-bento-chip-text - Text colour of non-solid chips (default `--st-cms-text-strong`).
+ * @csspart chips - The list of chips.
+ * @csspart chip - One chip.
  */
 declare class BentoGrid extends LitElement {
     static styles: lit.CSSResult;

package/dist/bento-grid/index.js

@@ -1,8 +1,9 @@
 import {
   BentoGrid
-} from "../chunk-76AVBQUA.js";
-import "../chunk-FZ36KL73.js";
-import "../chunk-KMU6ABQF.js";
+} from "../chunk-Q66CJO3P.js";
+import "../chunk-TJK55CJ2.js";
+import "../chunk-KZ7PMFWS.js";
+import "../chunk-NXUS2CH7.js";
 import "../chunk-EUXUH3YW.js";
 export {
   BentoGrid

package/dist/booking/index.d.ts

@@ -0,0 +1,309 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * The DOM-free logic behind `st-booking`: the typed reading of Suite Core's public bookings API, the
+ * client-side checks of the visitor's details, the request calls, and the calendar arithmetic. The server's
+ * rules stay authoritative; the checks here only give the visitor an answer before a request is made. Kept
+ * apart from `Booking.ts` so every rule and every response case can be unit-tested without a browser.
+ */
+
+/** The fields of the details form, in the order it shows them. Focus moves through them in this order. */
+declare const BOOKING_FIELD_NAMES: readonly ["name", "email", "phone", "notes", "consent"];
+type BookingFieldName = (typeof BOOKING_FIELD_NAMES)[number];
+interface BookingStaff {
+    id: string;
+    name: string;
+}
+interface BookingService {
+    id: string;
+    name: string;
+    description: string;
+    durationMinutes: number;
+    online: boolean;
+    staff: BookingStaff[];
+}
+interface BookingSlot {
+    /** RFC 3339 UTC instant. */
+    start: string;
+    end: string;
+    staffIds: string[];
+}
+interface BookingInfo {
+    /** A signed token. It is the only key to the booking: never logged, never put in an event. */
+    reference: string;
+    serviceId: string;
+    serviceName: string;
+    start: string;
+    end: string;
+}
+/** The client-side messages. `{field}` and `{max}` are filled in. The server's own messages are shown as sent. */
+interface BookingErrorMessages {
+    required: string;
+    tooLong: string;
+    invalidEmail: string;
+    invalidPhone: string;
+    consentRequired: string;
+}
+type BookingErrors = Partial<Record<BookingFieldName, string>>;
+
+/**
+ * Every visible string of `st-booking`, in English. A page replaces the ones it wants through the element's
+ * `labels` property (only the keys given are replaced). `{name}` placeholders are filled in by the component.
+ * The text the server sends for a field is shown as it is sent; everything else comes from here.
+ */
+interface BookingLabels {
+    stepService: string;
+    stepTime: string;
+    stepDetails: string;
+    stepDone: string;
+    stepsLabel: string;
+    serviceHeading: string;
+    staffLegend: string;
+    anyStaff: string;
+    /** `{minutes}` */
+    duration: string;
+    online: string;
+    noServices: string;
+    timeHeading: string;
+    rescheduleHeading: string;
+    previousMonth: string;
+    nextMonth: string;
+    /** `{date}` */
+    timesHeading: string;
+    /** `{zone}` */
+    timeZoneNote: string;
+    chooseDay: string;
+    /** `{count}` and `{date}` */
+    slotsAvailable: string;
+    /** `{month}` */
+    noSlots: string;
+    loading: string;
+    back: string;
+    continue: string;
+    confirmReschedule: string;
+    detailsHeading: string;
+    nameLabel: string;
+    namePlaceholder: string;
+    emailLabel: string;
+    emailPlaceholder: string;
+    phoneLabel: string;
+    notesLabel: string;
+    notesPlaceholder: string;
+    /** `{count}` and `{max}` */
+    notesCounter: string;
+    consentLabel: string;
+    requiredLabel: string;
+    requiredNote: string;
+    submit: string;
+    sending: string;
+    bookedHeading: string;
+    bookingHeading: string;
+    bookedNote: string;
+    rescheduledNote: string;
+    serviceLabel: string;
+    whenLabel: string;
+    manageLinkLabel: string;
+    manageLinkHint: string;
+    copyLink: string;
+    linkCopied: string;
+    reschedule: string;
+    cancel: string;
+    cancelConfirm: string;
+    cancelYes: string;
+    cancelNo: string;
+    cancelledHeading: string;
+    cancelledNote: string;
+    bookAnother: string;
+    errorNote: string;
+    retry: string;
+    slotTakenNote: string;
+    tooLateNote: string;
+    notFoundNote: string;
+    /** `{seconds}` */
+    rateLimitedNote: string;
+    rateLimitedGenericNote: string;
+    validationNote: string;
+}
+declare const DEFAULT_BOOKING_LABELS: BookingLabels;
+
+/**
+ * A booking experience for a website, in place of Microsoft's own Bookings page: pick a service, optionally
+ * a staff member ("Any available" is the default), pick a day on a calendar and a time, enter name, email,
+ * an optional phone and notes, accept the consent box, and get a confirmation with a private link to manage
+ * the appointment. It talks to Suite Core's public bookings API under `endpoint`
+ * (`{endpoint}/public/v1/bookings/...`, no cookies, no credentials).
+ *
+ * Times are shown in the visitor's own time zone (through `Intl`, never a fixed zone); the API's instants
+ * are UTC. The calendar is a keyboard grid: arrow keys move by day and week, Home/End to the week's start
+ * and end, Page Up/Page Down by month. Each step moves focus to its heading, results are announced politely
+ * and problems with `role="alert"`.
+ *
+ * Opening an existing booking: set `reference`, or open the page with `#ref=...` (preferred: a hash is never
+ * sent to a server or in a Referer header) or `?ref=...`. The booking shows with Reschedule and Cancel.
+ * Reschedule picks a new slot among the availability of the same service. The reference is a signed token and
+ * the only key to the booking: it is never put in an event, never logged, and the manage link puts it in the
+ * hash. After booking, the link is shown (with a copy button) and a note asks the visitor to keep it private.
+ *
+ * A hidden honeypot field (`website`) must stay empty. A 409 `slot_taken` reloads the times and says so; a 429
+ * shows the wait from `Retry-After`; the text the server sends is shown only for the fields it rejected.
+ *
+ * Every visible string is in `labels` (English defaults, only the keys given are replaced).
+ *
+ * @fires st-booking-created - Bubbles and is composed. Detail `{ serviceId: string, start: string }`. No personal data and no reference.
+ * @fires st-booking-rescheduled - Bubbles and is composed. Detail `{ serviceId: string, start: string }` (the new start).
+ * @fires st-booking-cancelled - Bubbles and is composed. Detail `{ serviceId: string }`.
+ * @fires st-booking-error - Bubbles and is composed. Detail `{ kind: 'validation' | 'slot_taken' | 'too_late' | 'not_found' | 'rate_limited' | 'unavailable' }`.
+ * @csspart steps - The step indicator.
+ * @csspart heading - The heading of the current step.
+ * @csspart service - Each service choice.
+ * @csspart calendar - The month grid.
+ * @csspart day - Each day button.
+ * @csspart slot - Each time button.
+ * @csspart field - Each field's wrapper (label, control and error).
+ * @csspart label - Each field's label.
+ * @csspart input - Each text input and the notes textarea.
+ * @csspart error - Each field's error message.
+ * @csspart button - Every button except the primary one.
+ * @csspart primary - The primary button of a step.
+ * @csspart success - The success note.
+ * @csspart alert - The alert (rate limit, taken slot, unavailable, or a server message that is not on one field).
+ * @csspart summary - The service, date and time of a booking.
+ */
+declare class Booking extends LitElement {
+    static styles: lit.CSSResult;
+    /** Base URL of the Suite Core API, without a path (`https://api.apps.example.com`). The component calls `{endpoint}/public/v1/bookings/...`. Empty: the component shows the unavailable note without sending anything. */
+    endpoint: string;
+    /** A booking reference to open (the signed token from a manage link). Empty: the page's `#ref=` or `?ref=` is used, else a new booking starts. Treat it as a secret. */
+    reference: string;
+    /** Preselects a service by id and skips the service step, when the API lists it. */
+    serviceId: string;
+    /** The first day of the calendar's week: `1` (Monday, the default) or `0` (Sunday). */
+    weekStart: 0 | 1;
+    /** Language for dates and times (a BCP 47 tag). Empty uses the page's `lang`, or the browser's. */
+    locale: string;
+    /** The address the manage link points at. Empty uses the current page. The reference goes in its hash. */
+    manageUrl: string;
+    /** Replaces the English texts. Only the keys given are replaced. See `BookingLabels`. */
+    labels: Partial<BookingLabels>;
+    /** Replaces the English validation messages (`required`, `tooLong`, ...). Only the keys given are replaced. */
+    errorMessages: Partial<BookingErrorMessages>;
+    private view;
+    private mode;
+    private services;
+    private service?;
+    private staffId;
+    private month;
+    private slots;
+    private slotsLoading;
+    private selectedDay;
+    private focusDay;
+    private selectedSlot?;
+    private booking?;
+    private banner;
+    private confirmingCancel;
+    private busy;
+    private errors;
+    private alertText;
+    private notice;
+    private notesLength;
+    /** The reference in use: the property, the page URL, or the one the API just gave. Never rendered or sent anywhere but the API. */
+    private activeReference;
+    private inflight;
+    private slotsRun;
+    /** What the details form held when the visitor went back to change the time, so nothing typed is lost. */
+    private draft;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<PropertyKey, unknown>): void;
+    private text;
+    private messages;
+    private fieldLabels;
+    private format;
+    private fullDate;
+    private timeOfDay;
+    private whenText;
+    private monthName;
+    private zoneName;
+    private resetState;
+    /** Opens an existing booking when there is a reference, else starts at the services. */
+    private start;
+    private loadServices;
+    private loadBooking;
+    /** Switches the step, clears the last problem and moves focus to the new step's heading. */
+    private go;
+    /** Shows the note for a failed call and reports it. `next` is the step to show (when it should change). */
+    private fail;
+    private chooseService;
+    /** Loads the current month's times. With `advance`, an empty month moves on to the next, up to a few months. */
+    private loadSlots;
+    private shiftMonth;
+    private onStaffChange;
+    private pickDay;
+    private pickSlot;
+    private onGridKeydown;
+    private monthDelta;
+    private focusDayButton;
+    private continueFromTime;
+    private backFromTime;
+    private book;
+    /** Server messages go on the fields that exist; a rejected start or staff means the time must be picked again. */
+    private applyServerErrors;
+    private reschedule;
+    private startReschedule;
+    private cancelBooking;
+    private freshController;
+    private bookAnother;
+    private copyLink;
+    private manageLink;
+    private readText;
+    private readValues;
+    private focusField;
+    private heading;
+    private renderSteps;
+    private renderServices;
+    private renderStaff;
+    private renderCalendar;
+    private renderTime;
+    private requiredMark;
+    private renderInput;
+    private renderDetails;
+    private renderBooking;
+    private renderCancelled;
+    private renderRetry;
+    private renderView;
+    render(): lit.TemplateResult<1>;
+}
+
+/** Fired on `st-booking` once a new appointment is booked. Detail `{ serviceId, start }`. Bubbles and is composed. */
+declare const BOOKING_CREATED_EVENT = "st-booking-created";
+/** Fired on `st-booking` once an appointment is moved. Detail `{ serviceId, start }` (the new start). Bubbles and is composed. */
+declare const BOOKING_RESCHEDULED_EVENT = "st-booking-rescheduled";
+/** Fired on `st-booking` once an appointment is cancelled. Detail `{ serviceId }`. Bubbles and is composed. */
+declare const BOOKING_CANCELLED_EVENT = "st-booking-cancelled";
+/** Fired on `st-booking` when a call was not accepted. Detail `{ kind }`. Bubbles and is composed. */
+declare const BOOKING_ERROR_EVENT = "st-booking-error";
+/**
+ * Why a call was not accepted: `validation` (the server rejected a field), `slot_taken` (someone else took
+ * the time), `too_late` (the appointment has started or is too close to change), `not_found` (no such
+ * booking or service), `rate_limited` (too many requests) or `unavailable` (the API could not be reached,
+ * is switched off, or failed).
+ */
+type BookingErrorKind = 'validation' | 'slot_taken' | 'too_late' | 'not_found' | 'rate_limited' | 'unavailable';
+interface BookingCreatedEventDetail {
+    serviceId: string;
+    /** RFC 3339 UTC instant. */
+    start: string;
+}
+interface BookingRescheduledEventDetail {
+    serviceId: string;
+    /** RFC 3339 UTC instant of the new time. */
+    start: string;
+}
+interface BookingCancelledEventDetail {
+    serviceId: string;
+}
+interface BookingErrorEventDetail {
+    kind: BookingErrorKind;
+}
+
+export { BOOKING_CANCELLED_EVENT, BOOKING_CREATED_EVENT, BOOKING_ERROR_EVENT, BOOKING_RESCHEDULED_EVENT, Booking, type BookingCancelledEventDetail, type BookingCreatedEventDetail, type BookingErrorEventDetail, type BookingErrorKind, type BookingErrorMessages, type BookingErrors, type BookingFieldName, type BookingInfo, type BookingLabels, type BookingRescheduledEventDetail, type BookingService, type BookingSlot, type BookingStaff, DEFAULT_BOOKING_LABELS };

package/dist/booking/index.js

@@ -0,0 +1,20 @@
+import {
+  BOOKING_CANCELLED_EVENT,
+  BOOKING_CREATED_EVENT,
+  BOOKING_ERROR_EVENT,
+  BOOKING_RESCHEDULED_EVENT,
+  Booking,
+  DEFAULT_BOOKING_LABELS
+} from "../chunk-DPANTC3O.js";
+import "../chunk-CZUGPKXV.js";
+import "../chunk-NXUS2CH7.js";
+import "../chunk-EUXUH3YW.js";
+export {
+  BOOKING_CANCELLED_EVENT,
+  BOOKING_CREATED_EVENT,
+  BOOKING_ERROR_EVENT,
+  BOOKING_RESCHEDULED_EVENT,
+  Booking,
+  DEFAULT_BOOKING_LABELS
+};
+//# sourceMappingURL=index.js.map

package/dist/booking/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/card/index.d.ts

@@ -2,10 +2,9 @@ import * as lit from 'lit';
 import { LitElement } from 'lit';
 
 /**
- * A surfaced container — content goes in the default slot. Ports `SankhyaUI`'s React `Card`
- * (`variant`, `padding`, `elevation`, `hoverable`, `inverted`); `onClick` is just a native `click`
- * listener on the element. `padding` takes `none | small | medium | large` (the source's
- * `sm|md|lg`, spelled like `paddingScaleStyles`); `elevation` takes `none | sm | md | lg`.
+ * A surfaced container — content goes in the default slot. Attributes: `variant`, `padding`,
+ * `elevation`, `hoverable`, `inverted`; a click handler is just a native `click` listener on the
+ * element. `padding` takes `none | small | medium | large`; `elevation` takes `none | sm | md | lg`.
  */
 declare class Card extends LitElement {
     static styles: lit.CSSResult;

package/dist/card/index.js

@@ -1,7 +1,7 @@
 import {
   Card
-} from "../chunk-ZN4LIKVG.js";
-import "../chunk-KMU6ABQF.js";
+} from "../chunk-QSJ543V2.js";
+import "../chunk-NXUS2CH7.js";
 import "../chunk-EUXUH3YW.js";
 export {
   Card

package/dist/carousel/index.d.ts

@@ -7,7 +7,8 @@ import { LitElement } from 'lit';
  * of the source's framer-motion spring), or fades in with `transition="fade"`. Autoplay pauses
  * while hovered (unless `pause-on-hover` is turned off, e.g. for a full-screen hero the pointer
  * nearly always rests on) or focused, and stops when the element is disconnected; a paused slide
- * keeps the time it had left.
+ * keeps the time it had left. Under `prefers-reduced-motion: reduce` autoplay starts paused; the
+ * tabs' play button still starts it.
  *
  * `indicator-style="tabs"` replaces the dots with a row of labelled tabs along the bottom, each
  * with a progress bar that fills while its slide is showing, plus a pause button — the tabbed hero
@@ -42,12 +43,18 @@ declare class Carousel extends LitElement {
     private slideLabels;
     /** Paused with the pause button; stays paused until the button is pressed again. */
     private userPaused;
-    /** Paused while hovered or focused. */
-    private paused;
+    /** Pointer is over the carousel (only counts with `pause-on-hover`). */
+    private hovered;
+    /** Focus is inside the carousel, other than the play button. */
+    private focused;
+    /** False until the slides first change: the first slide is on screen at first paint and does not animate. */
+    private turned;
     private timer?;
     /** Time left on the current slide, so a pause resumes where it stopped. */
     private remaining;
     private startedAt;
+    private reducedMotion?;
+    private onReducedMotionChange;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected willUpdate(changed: Map<string, unknown>): void;
@@ -55,14 +62,21 @@ declare class Carousel extends LitElement {
     private get halted();
     /** Applies a pause-state change, freezing or resuming the timer (and the tab progress bar). */
     private hold;
-    private pause;
-    private pauseOnEnter;
-    private resume;
+    private onPointerEnter;
+    private onPointerLeave;
+    /** Focus inside the carousel pauses it (WCAG 2.2.2), but focusing the play button does not, so pressing play starts it. */
+    private onFocusIn;
+    private onFocusOut;
     private togglePlay;
     private get slides();
     private labelFor;
     private syncSlides;
     private onSlotChange;
+    /**
+     * The first slide's image is the one visitors see first, so it is preloaded at high priority. The
+     * other slides are display:none (their CSS backgrounds are not fetched) until they are shown.
+     */
+    private preloadImage;
     private stopTimer;
     private startTimer;
     private restartTimer;

package/dist/carousel/index.js

@@ -1,8 +1,8 @@
 import {
   Carousel
-} from "../chunk-EMCQBT3S.js";
-import "../chunk-FZ36KL73.js";
-import "../chunk-KMU6ABQF.js";
+} from "../chunk-LO6TZBGD.js";
+import "../chunk-KZ7PMFWS.js";
+import "../chunk-NXUS2CH7.js";
 import "../chunk-EUXUH3YW.js";
 export {
   Carousel

package/dist/chip/index.js

@@ -1,7 +1,7 @@
 import {
   Chip
-} from "../chunk-AKJQ345O.js";
-import "../chunk-KMU6ABQF.js";
+} from "../chunk-5AWGZQWU.js";
+import "../chunk-NXUS2CH7.js";
 import "../chunk-EUXUH3YW.js";
 export {
   Chip

package/dist/{chunk-JQY2G4QK.js → chunk-2GTR37PU.js}

@@ -1,7 +1,7 @@
 import {
   controlBaseStyles,
   fontFamilyStyles
-} from "./chunk-KMU6ABQF.js";
+} from "./chunk-NXUS2CH7.js";
 import {
   __decorateClass
 } from "./chunk-EUXUH3YW.js";
@@ -309,4 +309,4 @@ MenuGridItem = __decorateClass([
 export {
   MenuGridItem
 };
-//# sourceMappingURL=chunk-JQY2G4QK.js.map
+//# sourceMappingURL=chunk-2GTR37PU.js.map

package/dist/chunk-2GTR37PU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/menu-grid-item/MenuGridItem.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\nimport type { MenuGridItemSelectEventDetail } from './MenuGridItemEvents';\n\n/**\n * One entry in an `st-menu-grid` — icon (via `slot=\"icon\"`) + title on one line, an optional\n * description below, and an optional corner badge (\"New\", \"Popular\", ...). Effects are CSS:\n * fades up the first time it scrolls into view, scales to 1.02 on hover / 0.98 while pressed, the\n * icon tilts on hover, the badge pops in. Colors come from the suite theme rather than per-item\n * utility classes.\n *\n * An `http(s)` `href` opens in a new tab. Any other `href` fires a *cancelable*\n * `menu-grid-item-select` event (detail: `{ href }`) first: a host doing client-side routing calls\n * `event.preventDefault()` on it, which also cancels the anchor's own navigation.\n */\n@customElement('st-menu-grid-item')\nexport class MenuGridItem extends LitElement {\n  /** `focus()` on the element focuses its link, so `st-dropdown` can arrow-key between items. */\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n  static styles = css`\n    ${controlBaseStyles}\n\n    :host {\n      display: block;\n      ${fontFamilyStyles}\n    }\n\n    @keyframes st-menu-grid-badge-pop {\n      from {\n        transform: scale(0);\n      }\n      70% {\n        transform: scale(1.12);\n      }\n      to {\n        transform: scale(1);\n      }\n    }\n\n    .menu-grid-item {\n      display: flex;\n      flex-direction: column;\n      border-radius: 8px;\n      position: relative;\n      overflow: hidden;\n      color: var(--st-color-text);\n      transition:\n        opacity 0.4s ease-out,\n        transform 0.2s ease,\n        background-color 0.2s ease;\n    }\n\n    .menu-grid-item.pending {\n      opacity: 0;\n      transform: translateY(20px);\n    }\n\n    .menu-grid-item.regular {\n      padding: 16px;\n    }\n\n    .menu-grid-item.compact {\n      padding: 12px;\n    }\n\n    /* Keyboard focus gets the same treatment as hover. */\n    .menu-grid-item:hover,\n    .menu-grid-item:has(.menu-grid-link:focus-visible) {\n      background: var(--st-color-hover);\n      transform: scale(1.02);\n    }\n\n    .menu-grid-item:active {\n      transform: scale(0.98);\n    }\n\n    .menu-grid-link {\n      display: flex;\n      flex-direction: column;\n      text-decoration: none;\n      color: inherit;\n      width: 100%;\n      height: 100%;\n      gap: 8px;\n    }\n\n    .menu-grid-badge {\n      position: absolute;\n      top: 2px;\n      right: 8px;\n      font-size: 0.5rem;\n      padding: 2px 8px;\n      border-radius: 9999px;\n      font-weight: 500;\n      z-index: 1;\n      background-color: var(--st-color-text-strong);\n      color: var(--st-color-on-solid);\n      animation: st-menu-grid-badge-pop 0.35s ease-out;\n    }\n\n    .menu-grid-header {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      width: 100%;\n    }\n\n    .menu-grid-icon {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 32px;\n      height: 32px;\n      border-radius: 6px;\n      transition:\n        background-color 0.2s ease,\n        transform 0.2s ease;\n      flex-shrink: 0;\n      padding: 0;\n      margin-bottom: 0;\n    }\n\n    .menu-grid-icon:hover {\n      transform: rotate(5deg) scale(1.1);\n    }\n\n    .menu-grid-icon[hidden] {\n      display: none;\n    }\n\n    .menu-grid-icon ::slotted(*) {\n      width: 18px;\n      height: 18px;\n    }\n\n    .menu-grid-title {\n      font-size: 0.875rem;\n      font-weight: 500;\n      color: var(--st-color-text-strong);\n      transition: color 0.2s ease;\n      flex: 1;\n      min-width: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      margin-bottom: 0;\n    }\n\n    .menu-grid-description {\n      font-size: 0.75rem;\n      color: var(--st-color-text-muted);\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      line-height: 1.4;\n      transition: color 0.2s ease;\n    }\n\n    .menu-grid-item.compact .menu-grid-header {\n      gap: 8px;\n    }\n\n    .menu-grid-item.compact .menu-grid-icon {\n      width: 24px;\n      height: 24px;\n    }\n\n    .menu-grid-item.compact .menu-grid-icon ::slotted(*) {\n      width: 14px;\n      height: 14px;\n    }\n\n    .menu-grid-item.compact .menu-grid-title {\n      font-size: 0.75rem;\n    }\n\n    .menu-grid-item.compact .menu-grid-description {\n      font-size: 0.75rem;\n    }\n\n    .menu-grid-header.icon-only {\n      justify-content: center;\n    }\n\n    @media (max-width: 480px) {\n      .menu-grid-header {\n        gap: 8px;\n      }\n\n      .menu-grid-icon {\n        width: 28px;\n        height: 28px;\n      }\n\n      .menu-grid-icon ::slotted(*) {\n        width: 16px;\n        height: 16px;\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .menu-grid-item,\n      .menu-grid-icon {\n        transition: none;\n      }\n\n      .menu-grid-item.pending {\n        opacity: 1;\n        transform: none;\n      }\n\n      .menu-grid-badge {\n        animation: none;\n      }\n    }\n  `;\n\n  @property({ type: String })\n  title = '';\n\n  @property({ type: String })\n  description = '';\n\n  @property({ type: String })\n  href = '';\n\n  /** Small corner label, e.g. \"New\"/\"Beta\" — omit for none. */\n  @property({ type: String })\n  badge = '';\n\n  @property({ type: Boolean, reflect: true })\n  compact = false;\n\n  /** Suppresses the description even when `description` is set (source: `showDescription`, default `true`). */\n  @property({ type: Boolean, attribute: 'show-description' })\n  showDescription = true;\n\n  /** Whether `slot=\"icon\"` has content, so an omitted icon leaves no empty box. */\n  @state() private hasIcon = false;\n\n  /** True until the item first scrolls into view (the source's `whileInView ... once`). */\n  @state() private pending = true;\n\n  private observer?: IntersectionObserver;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    if (typeof IntersectionObserver === 'undefined') {\n      this.pending = false;\n      return;\n    }\n    this.observer = new IntersectionObserver((entries) => {\n      if (entries.some((entry) => entry.isIntersecting)) {\n        this.pending = false;\n        this.observer?.disconnect();\n      }\n    });\n    this.observer.observe(this);\n  }\n\n  disconnectedCallback(): void {\n    this.observer?.disconnect();\n    super.disconnectedCallback();\n  }\n\n  private onIconSlotChange = (event: Event): void => {\n    this.hasIcon = (event.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\n  };\n\n  private get isExternal(): boolean {\n    return this.href.startsWith('http');\n  }\n\n  private onClick = (event: MouseEvent): void => {\n    if (this.isExternal) return;\n    const selectEvent = new CustomEvent<MenuGridItemSelectEventDetail>('menu-grid-item-select', {\n      detail: { href: this.href },\n      bubbles: true,\n      composed: true,\n      cancelable: true\n    });\n    this.dispatchEvent(selectEvent);\n    if (selectEvent.defaultPrevented) event.preventDefault();\n  };\n\n  render() {\n    const iconOnly = this.hasIcon && !this.title;\n    return html`\n      <div class=\"menu-grid-item ${this.compact ? 'compact' : 'regular'} ${this.pending ? 'pending' : ''}\" part=\"item\">\n        <a\n          part=\"link\"\n          class=\"menu-grid-link\"\n          href=${this.href}\n          target=${this.isExternal ? '_blank' : '_self'}\n          rel=${this.isExternal ? 'noopener noreferrer' : nothing}\n          @click=${this.onClick}\n        >\n          ${this.badge ? html`<span part=\"badge\" class=\"menu-grid-badge\">${this.badge}</span>` : nothing}\n          <span class=\"menu-grid-header ${iconOnly ? 'icon-only' : ''}\" part=\"header\">\n            <span class=\"menu-grid-icon\" part=\"icon\" ?hidden=${!this.hasIcon}><slot name=\"icon\" @slotchange=${this.onIconSlotChange}></slot></span>\n            ${this.title ? html`<span part=\"title\" class=\"menu-grid-title\">${this.title}</span>` : nothing}\n          </span>\n          ${this.description && this.showDescription\n            ? html`<span part=\"description\" class=\"menu-grid-description\">${this.description}</span>`\n            : nothing}\n        </a>\n      </div>\n    `;\n  }\n}\n"],"mappings":"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","names":[]}