@tartaguti/ui-components 0.0.0-stage → 0.2.0

package/dist/sidebar/tt-sidebar.js

@@ -0,0 +1,539 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css, nothing } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import "../tt-icon.js";
+/**
+ * The navigation column of an app shell.
+ *
+ * ---------------------------------------------------------------------
+ * HOW COLLAPSING WORKS, AND WHY IT NEEDS NO PROPS.
+ *
+ * With `collapsible`, the sidebar can shrink to an icon rail. Everything
+ * inside it has to change at once: labels disappear, rows centre, group
+ * headings go, badges go, the indent goes. Passing that down would mean a
+ * `collapsed` prop on every child, kept in sync by hand, at every depth.
+ *
+ * Instead the collapsed state is published as ordinary CSS custom
+ * properties on the host, and each child reads the ones it cares about
+ * through var() with the expanded value as the fallback:
+ *
+ *   --tt-menu-label-cols      1fr  ->  0fr      label track collapses
+ *   --tt-menu-gap             sp-2 ->  0px      no gap beside nothing
+ *   --tt-menu-justify         start->  center   icons centre in the rail
+ *   --tt-menu-trail-display   flex ->  none     badges and dots go
+ *   --tt-menu-heading-display flex ->  none     group headings go
+ *   --tt-menu-rail-rows       unset->  1fr      every group forced open
+ *   --tt-menu-rail-visibility unset->  visible  ...and its items reachable
+ *   --tt-menu-indent          sp-2 ->  0px      no nesting indent
+ *
+ * Custom properties inherit and they cross shadow boundaries, so this
+ * reaches a menu item nested three groups deep with no wiring, and a menu
+ * item used outside a sidebar simply gets the fallbacks. Same mechanism
+ * as --tt-radius-nested in tokens.css.
+ *
+ * They are declared in the stylesheet under :host([collapsed]) rather
+ * than written from JavaScript, and that matters: a media query can
+ * override a stylesheet rule, and cannot override an inline style. It is
+ * what lets the block at the bottom of this file switch the whole rail
+ * off on a phone, where the sidebar is a drawer and a rail would be an
+ * unusable 64px strip sliding over the page.
+ *
+ * ---------------------------------------------------------------------
+ * WHO OWNS `collapsed`.
+ *
+ * The component toggles itself and announces it with tt-sidebar-toggle,
+ * the same shape tt-menu-group uses for open/close. An app that wants to
+ * remember the choice listens for the event and writes the property back;
+ * one that does not gets working behaviour for free.
+ */
+let TTSidebar = class TTSidebar extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.variant = "default";
+        this.width = 240;
+        // The width of the icon rail when collapsed.
+        this.railWidth = 64;
+        // Shows the collapse control. Without it the sidebar cannot be shrunk.
+        this.collapsible = false;
+        this.collapsed = false;
+        /*
+          The name of the navigation landmark. A screen reader lists landmarks,
+          and "navigation" repeated twice on a page with a navbar tells the
+          listener nothing about which is which.
+        */
+        this.label = "Main";
+        this.collapseLabel = "Collapse sidebar";
+        this.expandLabel = "Expand sidebar";
+        this.hasHeader = false;
+        this.hasFooter = false;
+    }
+    /** Flips the rail open or shut, and announces it. */
+    toggle() {
+        this.collapsed = !this.collapsed;
+        this.dispatchEvent(new CustomEvent("tt-sidebar-toggle", {
+            detail: { collapsed: this.collapsed },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    willUpdate(changed) {
+        if (changed.has("width")) {
+            this.style.setProperty("--tt-sidebar-width", `${this.width}px`);
+        }
+        if (changed.has("railWidth")) {
+            this.style.setProperty("--tt-sidebar-rail-width", `${this.railWidth}px`);
+        }
+    }
+    updateSlot(prop, event) {
+        const slot = event.target;
+        this[prop] = slot
+            .assignedNodes({ flatten: true })
+            .some((node) => node.nodeType === Node.ELEMENT_NODE ||
+            (node.textContent ?? "").trim() !== "");
+    }
+    static { this.styles = css `
+    /* The browser's own [hidden] rule loses to any :host display, so a
+       hidden element would still show. Important, so it always wins. */
+    :host([hidden]) {
+      display: none !important;
+    }
+
+    :host {
+      display: block;
+
+      width: var(--tt-sidebar-width, 240px);
+      max-width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      overflow: hidden;
+
+      font-family: var(--tt-font-sans);
+      -webkit-font-smoothing: antialiased;
+
+      color: var(--tt-sidebar-foreground);
+
+      /* The one animation the shell itself performs. Everything inside
+         reacts to the width rather than being animated separately, which
+         is why they all land together. */
+      transition: width var(--tt-duration-normal) var(--tt-ease-out);
+    }
+
+    /* ---- the collapsed channel ----
+
+       See the note at the top of this file. Values here, fallbacks in the
+       children, so nothing has to be told anything. */
+
+    :host([collapsed]) {
+      width: var(--tt-sidebar-rail-width, 64px);
+
+      --tt-menu-label-cols: 0fr;
+      --tt-menu-gap: 0px;
+      --tt-menu-justify: center;
+      --tt-menu-trail-display: none;
+      --tt-menu-heading-display: none;
+      --tt-menu-rail-rows: 1fr;
+      --tt-menu-rail-visibility: visible;
+      --tt-menu-indent: 0px;
+
+      /* The arrow has nothing to sit beside any more. */
+      --tt-rail-justify: center;
+    }
+
+    nav {
+      width: 100%;
+      max-width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+
+      background: var(--tt-sidebar);
+      color: var(--tt-sidebar-foreground);
+
+      border: 1px solid var(--tt-sidebar-border);
+      border-radius: var(--tt-radius);
+
+      padding: var(--tt-space-4);
+
+      display: flex;
+      flex-direction: column;
+      gap: var(--tt-space-4);
+
+      overflow: hidden;
+
+      transition:
+        padding var(--tt-duration-normal) var(--tt-ease-out),
+        box-shadow var(--tt-duration-normal) var(--tt-ease-out);
+    }
+
+    /*
+      THE PANEL ANIMATES. THE TEXT DOES NOT.
+
+      Nothing inside a menu item transitions its label any more, so a word
+      is either there or it is not. That is the whole behaviour, and this
+      one rule is what makes it look right.
+
+      Without it, opening would re-lay-out every row at every width
+      between 64px and 240px, and a label that is present the whole time
+      has to ellipsis its way in: D..., Dash..., Dashboa..., Dashboard.
+      Same chewing as before, just at full opacity.
+
+      So while a collapsible sidebar is open, the content is pinned to the
+      width it will end at, and the host's overflow:hidden clips it. The
+      text is laid out ONCE, at its real size, and the panel slides off it
+      rather than squeezing it.
+
+      Only on a collapsible sidebar, and only while it is open, so a
+      sidebar in a container narrower than its own width is unaffected.
+    */
+    :host([collapsible]:not([collapsed])) nav {
+      min-width: var(--tt-sidebar-width, 240px);
+    }
+
+    /* A rail is mostly padding if it keeps the full gutter, and the icons
+       stop looking centred. */
+    :host([collapsed]) nav {
+      padding: var(--tt-space-4) var(--tt-space-2);
+    }
+
+    .borderless {
+      border: none;
+      border-radius: 0;
+    }
+
+    /*
+      Floating: the column reads as a card sitting ON the page rather than
+      as a wall beside it. Useful when the shell has a coloured background
+      worth seeing around the navigation.
+    */
+    .floating {
+      /* The inset is what makes it float. Without a gap on all four
+         sides it is still a wall, just a rounded one. The height and
+         width are reduced by the same amount so the margin does not
+         push the column past the shell. */
+      margin: var(--tt-space-2);
+      width: calc(100% - var(--tt-space-4));
+      height: calc(100% - var(--tt-space-4));
+
+      border-radius: var(--tt-radius-xl);
+
+      /* Level 1: a sidebar sits on the page, it does not hover over it
+         the way a modal does. See the elevation table in tokens.css. */
+      box-shadow: var(--tt-elevation-1);
+    }
+
+    .header {
+      padding-bottom: var(--tt-space-3);
+      border-bottom: 1px solid var(--tt-sidebar-border);
+    }
+
+    .content {
+      flex: 1;
+      min-height: 0;
+
+      display: flex;
+      flex-direction: column;
+      gap: var(--tt-space-1);
+
+      overflow-y: auto;
+
+      /* A rail is narrower than a scrollbar is wide in some browsers, and
+         a horizontal bar appearing under a column of icons looks broken. */
+      overflow-x: hidden;
+
+      /* Invisible at rest, there when you reach for it.
+
+         A navigation list is read, not scrubbed, so a permanent grey bar
+         down the side is decoration that competes with the items. But
+         the list CAN overflow, so the scroller has to stay real: this
+         hides the thumb rather than removing the scrollbar.
+
+         The track keeps its width in both states. Toggling
+         scrollbar-width instead would reflow every row by 6px the moment
+         the pointer entered the column, which is a worse problem than
+         the one being solved. */
+      scrollbar-width: thin;
+      scrollbar-color: transparent transparent;
+    }
+
+    :host(:hover) .content,
+    .content:focus-within {
+      scrollbar-color: color-mix(
+          in oklab,
+          var(--tt-sidebar-foreground) 25%,
+          transparent
+        )
+        transparent;
+    }
+
+    .content::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    .content::-webkit-scrollbar-thumb {
+      background: transparent;
+      border-radius: var(--tt-radius-full);
+
+      transition: background var(--tt-duration-fast) var(--tt-ease-out);
+    }
+
+    :host(:hover) .content::-webkit-scrollbar-thumb,
+    .content:focus-within::-webkit-scrollbar-thumb {
+      background: color-mix(
+        in oklab,
+        var(--tt-sidebar-foreground) 22%,
+        transparent
+      );
+    }
+
+    .content::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    .footer {
+      padding-top: var(--tt-space-3);
+      border-top: 1px solid var(--tt-sidebar-border);
+    }
+
+    /* ---- the collapse control ----
+
+       An arrow, not a labelled row. A full-width "Collapse sidebar"
+       button read as a navigation destination, which is exactly what it
+       is not: it changes how the sidebar is drawn, it does not take you
+       anywhere. Something that small and that permanent should be a
+       handle, and a handle carries its meaning in its shape.
+
+       It sits in FLOW at the bottom rather than floating on the trailing
+       edge. An absolutely positioned handle looks better right up until
+       the rail, where 26px of button lands on top of a 64px column of
+       icons. In flow it can never overlap anything at either width. */
+
+    .rail-row {
+      display: flex;
+      justify-content: var(--tt-rail-justify, flex-end);
+
+      flex-shrink: 0;
+      padding: 0 var(--tt-space-1);
+    }
+
+    .rail {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      width: 26px;
+      height: 26px;
+      padding: 0;
+
+      border: 1px solid transparent;
+      border-radius: var(--tt-radius-full);
+      background: transparent;
+
+      color: var(--tt-muted-foreground);
+      cursor: pointer;
+
+      /* Out of the way until wanted. The sidebar is read far more often
+         than it is resized. */
+      opacity: 0;
+
+      transition:
+        opacity var(--tt-duration-fast) var(--tt-ease-out),
+        background var(--tt-duration-fast) var(--tt-ease-out),
+        border-color var(--tt-duration-fast) var(--tt-ease-out),
+        color var(--tt-duration-fast) var(--tt-ease-out);
+    }
+
+    /*
+      Three ways in, because hover alone is not a way in for everyone.
+      Collapsed is unconditional: once the labels are gone this button is
+      the only route back, so hiding it would be a trap.
+    */
+    :host(:hover) .rail,
+    :host(:focus-within) .rail,
+    :host([collapsed]) .rail {
+      opacity: 1;
+    }
+
+    @media (hover: none) {
+      .rail {
+        opacity: 1;
+      }
+    }
+
+    .rail:hover {
+      border-color: var(--tt-sidebar-border);
+      background: var(--tt-sidebar-accent);
+      color: var(--tt-sidebar-accent-foreground);
+    }
+
+    .rail:focus-visible {
+      opacity: 1;
+
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: var(--tt-ring-offset);
+    }
+
+    .rail tt-icon {
+      flex-shrink: 0;
+
+      /* One icon, turned over, rather than two icons swapped. Swapping
+         the name would replace the node and there would be nothing to
+         animate between. */
+      transition: transform var(--tt-duration-normal) var(--tt-ease-spring);
+    }
+
+    :host([collapsed]) .rail tt-icon {
+      transform: rotate(180deg);
+    }
+
+    [hidden] {
+      display: none;
+    }
+
+    /* ---- mobile ----
+
+       On a phone this element is not a column beside the page, it is a
+       drawer sliding over it (see tt-layout). A rail there would be a
+       64px strip covering the screen with no labels, so the whole
+       collapsed state is switched off and the drawer is always full
+       width. This works only because the channel above is declared in a
+       stylesheet: an inline style written from JavaScript could not be
+       overridden here. */
+
+    @media (max-width: 768px) {
+      :host([collapsed]) {
+        width: var(--tt-sidebar-width, 240px);
+
+        --tt-menu-label-cols: 1fr;
+        --tt-menu-gap: var(--tt-space-2);
+        --tt-menu-justify: flex-start;
+        --tt-menu-trail-display: flex;
+        --tt-menu-heading-display: flex;
+        --tt-menu-indent: var(--tt-space-2);
+
+        /* initial is the guaranteed-invalid value for a custom property,
+           so every var(--tt-menu-rail-rows, X) below falls back to X and
+           groups go back to obeying their own open state. Same for the
+           arrow's alignment. */
+        --tt-menu-rail-rows: initial;
+        --tt-menu-rail-visibility: initial;
+        --tt-rail-justify: initial;
+      }
+
+      /*
+        The pin above exists to stop the content reflowing DURING a width
+        animation, and on a phone there is no width animation: the drawer
+        is always full width. Left in, it would push the content past a
+        drawer narrower than 240px and clip the right-hand side of every
+        row.
+      */
+      :host([collapsible]:not([collapsed])) nav {
+        min-width: 0;
+      }
+
+      :host([collapsed]) nav {
+        padding: var(--tt-space-4);
+      }
+
+      :host([collapsed]) .rail tt-icon {
+        transform: none;
+      }
+
+      /* The drawer is already the full width it can be, so there is
+         nothing for this button to do. */
+      .rail {
+        display: none;
+      }
+    }
+  `; }
+    render() {
+        const variant = this.variant === "borderless"
+            ? "borderless"
+            : this.variant === "floating"
+                ? "floating"
+                : "";
+        /*
+          The name is the whole control now that the text is gone, so it does
+          double duty: the accessible name AND the tooltip. An arrow with no
+          name is a mystery button.
+        */
+        const railName = this.collapsed ? this.expandLabel : this.collapseLabel;
+        return html `
+      <nav class=${variant} aria-label=${this.label}>
+        <div class="header" ?hidden=${!this.hasHeader}>
+          <slot
+            name="header"
+            @slotchange=${(e) => this.updateSlot("hasHeader", e)}
+          ></slot>
+        </div>
+
+        <div class="content">
+          <slot></slot>
+        </div>
+
+        ${this.collapsible
+            ? html `
+                <div class="rail-row">
+                  <button
+                    class="rail"
+                    part="rail"
+                    type="button"
+                    aria-expanded=${!this.collapsed}
+                    aria-label=${railName}
+                    title=${railName}
+                    @click=${this.toggle}
+                  >
+                    <tt-icon name="chevron-left" size="16px"></tt-icon>
+                  </button>
+                </div>
+              `
+            : nothing}
+
+        <div class="footer" ?hidden=${!this.hasFooter}>
+          <slot
+            name="footer"
+            @slotchange=${(e) => this.updateSlot("hasFooter", e)}
+          ></slot>
+        </div>
+      </nav>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], TTSidebar.prototype, "variant", void 0);
+__decorate([
+    property({ type: Number })
+], TTSidebar.prototype, "width", void 0);
+__decorate([
+    property({ type: Number, attribute: "rail-width" })
+], TTSidebar.prototype, "railWidth", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTSidebar.prototype, "collapsible", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TTSidebar.prototype, "collapsed", void 0);
+__decorate([
+    property({ type: String })
+], TTSidebar.prototype, "label", void 0);
+__decorate([
+    property({ type: String, attribute: "collapse-label" })
+], TTSidebar.prototype, "collapseLabel", void 0);
+__decorate([
+    property({ type: String, attribute: "expand-label" })
+], TTSidebar.prototype, "expandLabel", void 0);
+__decorate([
+    state()
+], TTSidebar.prototype, "hasHeader", void 0);
+__decorate([
+    state()
+], TTSidebar.prototype, "hasFooter", void 0);
+TTSidebar = __decorate([
+    customElement("tt-sidebar")
+], TTSidebar);
+export { TTSidebar };
+//# sourceMappingURL=tt-sidebar.js.map

package/dist/sidebar/tt-sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-sidebar.js","sourceRoot":"","sources":["../../src/sidebar/tt-sidebar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAErD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,eAAe,CAAC;AAIvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAEL,YAAO,GAAmB,SAAS,CAAC;QAGpC,UAAK,GAAG,GAAG,CAAC;QAEZ,6CAA6C;QAE7C,cAAS,GAAG,EAAE,CAAC;QAEf,uEAAuE;QAEvE,gBAAW,GAAG,KAAK,CAAC;QAGpB,cAAS,GAAG,KAAK,CAAC;QAElB;;;;UAIE;QAEF,UAAK,GAAG,MAAM,CAAC;QAGf,kBAAa,GAAG,kBAAkB,CAAC;QAGnC,gBAAW,GAAG,gBAAgB,CAAC;QAGvB,cAAS,GAAG,KAAK,CAAC;QAGlB,cAAS,GAAG,KAAK,CAAC;IAgc5B,CAAC;IA9bC,qDAAqD;IACrD,MAAM;QACJ,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;QAEjC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,mBAAmB,EAAE;YACnC,MAAM,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE;YACrC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAED,UAAU,CAAC,OAAuB;QAChC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACzB,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,oBAAoB,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC;QAClE,CAAC;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;YAC7B,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,yBAAyB,EAAE,GAAG,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC;QAC3E,CAAC;IACH,CAAC;IAEO,UAAU,CAAC,IAA+B,EAAE,KAAY;QAC9D,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;QAE7C,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI;aACd,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;aAChC,IAAI,CACH,CAAC,IAAI,EAAE,EAAE,CACP,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY;YACnC,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,CACzC,CAAC;IACN,CAAC;aAEM,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgWlB,AAhWY,CAgWX;IAEF,MAAM;QACJ,MAAM,OAAO,GACX,IAAI,CAAC,OAAO,KAAK,YAAY;YAC3B,CAAC,CAAC,YAAY;YACd,CAAC,CAAC,IAAI,CAAC,OAAO,KAAK,UAAU;gBAC3B,CAAC,CAAC,UAAU;gBACZ,CAAC,CAAC,EAAE,CAAC;QAEX;;;;UAIE;QACF,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;QAExE,OAAO,IAAI,CAAA;mBACI,OAAO,eAAe,IAAI,CAAC,KAAK;sCACb,CAAC,IAAI,CAAC,SAAS;;;0BAG3B,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC,CAAC;;;;;;;;UAS7D,IAAI,CAAC,WAAW;YACd,CAAC,CAAC,IAAI,CAAA;;;;;;oCAMkB,CAAC,IAAI,CAAC,SAAS;iCAClB,QAAQ;4BACb,QAAQ;6BACP,IAAI,CAAC,MAAM;;;;;eAKzB;YACH,CAAC,CAAC,OACN;;sCAE8B,CAAC,IAAI,CAAC,SAAS;;;0BAG3B,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC,CAAC;;;;KAIlE,CAAC;IACJ,CAAC;;AAjeD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACS;AAGpC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACf;AAIZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;4CACrC;AAIf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACvB;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CACzB;AAQlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACZ;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;gDACrB;AAGnC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;8CACvB;AAGvB;IADP,KAAK,EAAE;4CACkB;AAGlB;IADP,KAAK,EAAE;4CACkB;AApCf,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAoerB"}

package/dist/sr-only.d.ts

@@ -0,0 +1,15 @@
+/**
+ * `.sr-only`: present for screen readers, invisible on screen.
+ *
+ * Shared rather than copied, because a shadow root inherits no page
+ * styles, so every component that needs the class has to carry it, and
+ * hand-copied versions drift. Use it as the first entry of a styles array:
+ *
+ *   static styles = [srOnly, css`...`];
+ *
+ * clip-path rather than the older clip, which is deprecated. Not
+ * display:none or visibility:hidden: both remove the text from the
+ * accessibility tree too, which defeats the point.
+ */
+export declare const srOnly: import("lit").CSSResult;
+//# sourceMappingURL=sr-only.d.ts.map

package/dist/sr-only.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sr-only.d.ts","sourceRoot":"","sources":["../src/sr-only.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,MAAM,yBAWlB,CAAC"}

package/dist/sr-only.js

@@ -0,0 +1,27 @@
+import { css } from "lit";
+/**
+ * `.sr-only`: present for screen readers, invisible on screen.
+ *
+ * Shared rather than copied, because a shadow root inherits no page
+ * styles, so every component that needs the class has to carry it, and
+ * hand-copied versions drift. Use it as the first entry of a styles array:
+ *
+ *   static styles = [srOnly, css`...`];
+ *
+ * clip-path rather than the older clip, which is deprecated. Not
+ * display:none or visibility:hidden: both remove the text from the
+ * accessibility tree too, which defeats the point.
+ */
+export const srOnly = css `
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+`;
+//# sourceMappingURL=sr-only.js.map

package/dist/sr-only.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sr-only.js","sourceRoot":"","sources":["../src/sr-only.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;CAWxB,CAAC"}