@cruglobal/cornerstone-components 0.1.0

package/dist/unbundled/components/page/page.d.ts

@@ -0,0 +1,139 @@
+import type { PropertyValues } from 'lit';
+import CornerstoneElement from '../../internal/cornerstone-element.js';
+import '../button/button.js';
+import '../drawer/drawer.js';
+import type CsDrawer from '../drawer/drawer.js';
+import '../icon/icon.js';
+/**
+ * @summary Pages scaffold an entire application layout with header, navigation, sidebar, main content, aside, and
+ *  footer regions. Use them to structure full pages with minimal markup and responsive behavior built in.
+ * @documentation https://cruglobal.github.io/cornerstone-design-system/components/page
+ * @status stable
+ * @since 3.0
+ *
+ * @slot - The page's main content.
+ * @slot banner - The banner that gets display above the header. The banner will not be shown if no content is provided.
+ * @slot header - The header to display at the top of the page. If a banner is present, the header will appear below the banner. The header will not be shown if there is no content.
+ * @slot subheader - A subheader to display below the `header`. This is a good place to put things like breadcrumbs.
+ * @slot menu - The left side of the page. If you slot an element in here, you will override the default `navigation` slot and will be handling navigation on your own. This also will not disable the fallback behavior of the navigation button. This section "sticks" to the top as the page scrolls.
+ * @slot navigation-header - The header for a navigation area. On mobile this will be the header for `<cs-drawer>`.
+ * @slot navigation - The main content to display in the navigation area. This is displayed on the left side of the page, if `menu` is not used. This section "sticks" to the top as the page scrolls.
+ * @slot navigation-footer - The footer for a navigation area. On mobile this will be the footer for `<cs-drawer>`.
+ * @slot navigation-toggle - Use this slot to slot in your own button + icon for toggling the navigation drawer. By default it is a `<cs-button>` + a 3 bars `<cs-icon>`
+ * @slot navigation-toggle-icon - Use this to slot in your own icon for toggling the navigation drawer. By default it is 3 bars `<cs-icon>`.
+ * @slot main-header - Header to display inline above the main content.
+ * @slot main-footer - Footer to display inline below the main content.
+ * @slot aside - Content to be shown on the right side of the page. Typically contains a table of contents, ads, etc. This section "sticks" to the top as the page scrolls.
+ * @slot skip-to-content - The "skip to content" slot. You can override this If you would like to override the `Skip to content` button and add additional "Skip to X", they can be inserted here.
+ * @slot footer - The content to display in the footer. This is always displayed underneath the viewport so will always make the page "scrollable".
+ *
+ * @csspart page - The component's outer wrapper.
+ * @csspart banner - The banner to show above header.
+ * @csspart header - The header, usually for top level navigation / branding.
+ * @csspart subheader - Shown below the header, usually intended for things like breadcrumbs and other page level navigation.
+ * @csspart body - The wrapper around menu, main, and aside.
+ * @csspart menu - The left hand side of the page. Generally intended for navigation.
+ * @csspart navigation - The `<nav>` that wraps the navigation slots on desktop viewports.
+ * @csspart navigation-desktop - The `<nav>` for navigation on desktop viewports.
+ * @csspart navigation-header - The header for a navigation area. On mobile this will be the header for `<cs-drawer>`.
+ * @csspart navigation-footer - The footer for a navigation area. On mobile this will be the footer for `<cs-drawer>`.
+ * @csspart navigation-toggle - The default `<cs-button>` that will toggle the `<cs-drawer>` for mobile viewports.
+ * @csspart navigation-toggle-icon - The default `<cs-icon>` displayed inside of the navigation-toggle button.
+ * @csspart drawer - The `<cs-drawer>` that contains the navigation on mobile viewports.
+ * @csspart drawer__dialog - The navigation drawer's `dialog` part.
+ * @csspart drawer__header - The navigation drawer's `header` part.
+ * @csspart drawer__header-actions - The navigation drawer's `header-actions` part.
+ * @csspart drawer__title - The navigation drawer's `title` part.
+ * @csspart drawer__close-button - The navigation drawer's close button.
+ * @csspart drawer__close-button__button - The navigation drawer's close button's `button` part.
+ * @csspart drawer__body - The navigation drawer's `body` part.
+ * @csspart drawer__footer - The navigation drawer's `footer` part.
+ * @csspart main - The wrapper around the main header, content, and footer.
+ * @csspart main-header - The header above main content.
+ * @csspart main-content - The main content.
+ * @csspart main-footer - The footer below main content.
+ * @csspart aside - The right hand side of the page. Used for things like table of contents, ads, etc.
+ * @csspart skip-to-content - The "skip to content" link that lets keyboard users bypass navigation.
+ * @csspart footer - The footer of the page. This is always below the initial viewport size.
+ *
+ * @cssproperty [--menu-width=auto] - The width of the page's "menu" section.
+ * @cssproperty [--main-width=1fr] - The width of the page's "main" section.
+ * @cssproperty [--aside-width=auto] - The wide of the page's "aside" section.
+ * @cssproperty [--banner-height=0px] - The height of the banner. This gets calculated when the page initializes. If the height is known, you can set it here to prevent shifting when the page loads.
+ * @cssproperty [--header-height=0px] - The height of the header. This gets calculated when the page initializes. If the height is known, you can set it here to prevent shifting when the page loads.
+ * @cssproperty [--subheader-height=0px] - The height of the subheader. This gets calculated when the page initializes. If the height is known, you can set it here to prevent shifting when the page loads.
+ */
+export default class CsPage extends CornerstoneElement {
+    static css: import("lit").CSSResult[];
+    private headerResizeObserver;
+    private subheaderResizeObserver;
+    private bannerResizeObserver;
+    private footerResizeObserver;
+    private slotResizeObserver;
+    private handleNavigationToggle;
+    header: HTMLElement;
+    menu: HTMLElement;
+    main: HTMLElement;
+    aside: HTMLElement;
+    subheader: HTMLElement;
+    footer: HTMLElement;
+    banner: HTMLElement;
+    navigationDrawer: CsDrawer;
+    navigationToggleSlot: HTMLSlotElement;
+    /**
+     * The view is a reflection of the "mobileBreakpoint", when the page is larger than the `mobile-breakpoint` (768px by
+     * default), it is considered to be a "desktop" view. The view is merely a way to distinguish when to show/hide the
+     * navigation. You can use additional media queries to make other adjustments to content as necessary.
+     * The default is "desktop" because the "mobile navigation drawer" isn't accessible via SSR due to drawer requiring JS.
+     */
+    view: 'mobile' | 'desktop';
+    /**
+     * Whether or not the navigation drawer is open. Note, the navigation drawer is only "open" on mobile views.
+     */
+    navOpen: boolean;
+    /**
+     * At what page width to hide the "navigation" slot and collapse into a hamburger button.
+     * Accepts both numbers (interpreted as px) and CSS lengths (e.g. `50em`), which are resolved based on the root element.
+     */
+    mobileBreakpoint: string;
+    /**
+     * Where to place the navigation when in the mobile viewport.
+     */
+    navigationPlacement: 'start' | 'end';
+    /**
+     * Determines whether or not to hide the default hamburger button.
+     * This will automatically flip to "true" if you add an element with `data-toggle-nav` anywhere in the element light DOM.
+     * Generally this will be set for you and you don't need to do anything, unless you're using SSR, in which case you should set this manually for initial page loads.
+     */
+    disableNavigationToggle: boolean;
+    pageResizeObserver: ResizeObserver | null;
+    private updateNavigationToggleState;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    constructor();
+    connectedCallback(): void;
+    /**
+     * https://stackoverflow.com/a/26831113
+     * This prevents awkward gaps when scrolling the page and the aside / menu don't "fill" the gaps.
+     */
+    visiblePixelsInViewport(element: HTMLElement | null): number | null;
+    firstUpdated(changedProperties: PropertyValues<typeof this>): void;
+    disconnectedCallback(): void;
+    /**
+     * Shows the mobile navigation drawer
+     */
+    showNavigation(): void;
+    /**
+     * Hides the mobile navigation drawer
+     */
+    hideNavigation(): void;
+    /**
+     * Toggles the mobile navigation drawer
+     */
+    toggleNavigation(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cs-page': CsPage;
+    }
+}

package/dist/unbundled/components/page/page.js

@@ -0,0 +1,45 @@
+/*! Cornerstone Components 0.1.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CsPage
+} from "../../chunks/chunk.LABZF5G6.js";
+import "../../chunks/chunk.2DAXWPZV.js";
+import "../../chunks/chunk.PKWLIHR2.js";
+import "../../chunks/chunk.ISQOT475.js";
+import "../../chunks/chunk.NREJ4USG.js";
+import "../../chunks/chunk.N4FJJJBK.js";
+import "../../chunks/chunk.6INMSSKP.js";
+import "../../chunks/chunk.PBZ5J7GL.js";
+import "../../chunks/chunk.BNGGMXK5.js";
+import "../../chunks/chunk.5MGJKMWB.js";
+import "../../chunks/chunk.A2JHAWF4.js";
+import "../../chunks/chunk.KCSF6NHY.js";
+import "../../chunks/chunk.PSAE6QZG.js";
+import "../../chunks/chunk.ITDZMCUA.js";
+import "../../chunks/chunk.3XMRDGUU.js";
+import "../../chunks/chunk.4G4Y3HKX.js";
+import "../../chunks/chunk.I3LK24XZ.js";
+import "../../chunks/chunk.G2FXXPDW.js";
+import "../../chunks/chunk.MDV4MWU5.js";
+import "../../chunks/chunk.G5KWAXZV.js";
+import "../../chunks/chunk.DJGKLHDS.js";
+import "../../chunks/chunk.4BSDHHLS.js";
+import "../../chunks/chunk.DA42KEYS.js";
+import "../../chunks/chunk.T24BSOWI.js";
+import "../../chunks/chunk.IQJMSIWD.js";
+import "../../chunks/chunk.ZQ7G474G.js";
+import "../../chunks/chunk.RKGCFOCD.js";
+import "../../chunks/chunk.O6L7CNGM.js";
+import "../../chunks/chunk.VXLBZXY3.js";
+import "../../chunks/chunk.3QOMHIHS.js";
+import "../../chunks/chunk.MHH4NIPT.js";
+import "../../chunks/chunk.QGC4W2JQ.js";
+import "../../chunks/chunk.EXOHZSKZ.js";
+import "../../chunks/chunk.EJSU7GFZ.js";
+import "../../chunks/chunk.FGNU55DN.js";
+import "../../chunks/chunk.GT5PEMIO.js";
+import "../../chunks/chunk.HVRBYPAL.js";
+import "../../chunks/chunk.V3WAYU6A.js";
+import "../../chunks/chunk.M2YES2WV.js";
+export {
+  CsPage as default
+};

package/dist/unbundled/components/page/page.mobile.styles.d.ts

@@ -0,0 +1,2 @@
+export default _default;
+declare function _default(breakpoint?: string): string;

package/dist/unbundled/components/page/page.mobile.styles.js

@@ -0,0 +1,8 @@
+/*! Cornerstone Components 0.1.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  page_mobile_styles_default
+} from "../../chunks/chunk.2DAXWPZV.js";
+import "../../chunks/chunk.M2YES2WV.js";
+export {
+  page_mobile_styles_default as default
+};

package/dist/unbundled/components/page/page.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/unbundled/components/page/page.styles.js

@@ -0,0 +1,8 @@
+/*! Cornerstone Components 0.1.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  page_styles_default
+} from "../../chunks/chunk.PKWLIHR2.js";
+import "../../chunks/chunk.M2YES2WV.js";
+export {
+  page_styles_default as default
+};

package/dist/unbundled/components/pagination/pagination.d.ts

@@ -0,0 +1,116 @@
+import CornerstoneElement from '../../internal/cornerstone-element.js';
+import '../icon/icon.js';
+/**
+ * @summary Pagination splits long lists of content into pages, letting users navigate between them.
+ * @documentation https://cruglobal.github.io/cornerstone-design-system/components/pagination
+ * @status experimental
+ * @since 3.11
+ *
+ * @dependency cs-icon
+ *
+ * @event cs-page-change - Emitted when the page is about to change but before it does. Canceling this event with
+ *  `event.preventDefault()` prevents the page from changing.
+ * @event cs-after-page-change - Emitted after the page changes.
+ *
+ * @slot previous-icon - An icon to use in lieu of the default previous icon.
+ * @slot next-icon - An icon to use in lieu of the default next icon.
+ * @slot first-icon - An icon to use in lieu of the default first icon.
+ * @slot last-icon - An icon to use in lieu of the default last icon.
+ *
+ * @csspart pagination - The component's outer wrapper, a `<nav>` element.
+ * @csspart button - Every button or link, including page numbers and navigation controls.
+ * @csspart previous-button - The previous button.
+ * @csspart next-button - The next button.
+ * @csspart first-button - The first button.
+ * @csspart last-button - The last button.
+ * @csspart pages - The list that wraps the page number items.
+ * @csspart page - A page number button or link.
+ * @csspart page-current - The current page number button or link.
+ * @csspart ellipsis - An ellipsis for collapsed pages. Acts as a button that jumps several pages toward that side.
+ * @csspart summary - The summary of items on the current page, shown with the `with-summary` attribute.
+ * @csspart label - The "1 of 5" label shown between the navigation buttons in the `compact` layout.
+ *
+ * @cssstate disabled - Applied when the pagination is disabled.
+ */
+export default class CsPagination extends CornerstoneElement {
+    static css: import("lit").CSSResult;
+    /** How many pages an ellipsis skips when clicked. Matches the common convention (e.g. Ant Design). */
+    private static readonly jumpDistance;
+    private readonly localize;
+    /** The total number of items to paginate. */
+    total: number;
+    /** The number of items shown per page. */
+    pageSize: number;
+    /** The current page, starting at 1. */
+    page: number;
+    /** The number of pages to show on each side of the current page. */
+    siblingCount: number;
+    /** The number of pages to always show at the start and end. */
+    boundaryCount: number;
+    /** Hides the previous and next buttons. */
+    withoutNav: boolean;
+    /** Shows buttons that jump to the first and last pages. */
+    withEdges: boolean;
+    /** Shows a summary of the items on the current page, e.g. "1–10 of 237". */
+    withSummary: boolean;
+    /**
+     * The pagination's layout. The default `standard` format shows the full page list with ellipses; `compact` collapses
+     * it into a short "1 of 5" label flanked by the previous and next buttons, useful in tight spaces like toolbars and
+     * cards.
+     */
+    format: 'standard' | 'compact';
+    /**
+     * A URL template used to render page items as links instead of buttons. When set, items render as `<a>` elements for
+     * SSR, SEO, and no-JS support. Provide a string with `{page}` as a placeholder for the page number, e.g.
+     * `/products?page={page}`. In JavaScript, you can also assign a function that receives the page number and returns
+     * the URL, e.g. `el.hrefTemplate = page => \`/products?page=${page}\``.
+     */
+    hrefTemplate: string | ((page: number) => string);
+    /** Renders nothing when there's only one page. */
+    hideSinglePage: boolean;
+    /**
+     * A label that describes the pagination to assistive devices. This won't be shown on the screen, but it will be
+     * announced by screen readers. Especially useful when more than one pagination control exists on the same page.
+     */
+    label: string;
+    /** The pagination's visual appearance. */
+    appearance: 'outlined' | 'filled' | 'plain';
+    /** Disables the pagination. */
+    disabled: boolean;
+    /** Tracks whether the most recent page change came from an in-component activation, so we can restore focus. */
+    private shouldRestoreFocus;
+    /** The total number of pages, derived from `total` and `pageSize`. */
+    get totalPages(): number;
+    handleDisabledChange(): void;
+    handlePageBoundsChange(): void;
+    /** Resolves the URL for a given page when `hrefTemplate` is set, supporting both the string and function forms. */
+    private getHref;
+    /**
+     * Requests a change to the given page. Emits a cancelable `cs-page-change`; if not canceled, updates `page`,
+     * restores focus to the new current page, emits `cs-after-page-change`, and announces the change.
+     */
+    private requestPage;
+    /** Moves focus to the current page item after an in-component activation, so focus never falls back to the body. */
+    private restoreFocusToCurrentPage;
+    /** Announces the current page to assistive technology via the shared light-DOM live region. */
+    private announcePage;
+    updated(): void;
+    /** Renders a navigation control (first/previous/next/last). */
+    private renderNavButton;
+    /** Renders a single numbered page item. The visible number is the accessible name — no redundant aria-label. */
+    private renderPage;
+    /**
+     * Renders an ellipsis for a run of collapsed pages. Clicking it jumps a fixed number of pages toward that side, so a
+     * `start` ellipsis jumps backward and an `end` ellipsis jumps forward. `data-ellipsis` lets the styles collapse a
+     * second ellipsis when space is tight.
+     */
+    private renderEllipsis;
+    render(): import("lit-html").TemplateResult<1>;
+    /** Renders the optional "1–10 of 237" summary. */
+    private renderSummary;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cs-pagination': CsPagination;
+    }
+}

package/dist/unbundled/components/pagination/pagination.js

@@ -0,0 +1,27 @@
+/*! Cornerstone Components 0.1.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CsPagination
+} from "../../chunks/chunk.U5BGXF6C.js";
+import "../../chunks/chunk.J54TPJJR.js";
+import "../../chunks/chunk.P7WSEWAS.js";
+import "../../chunks/chunk.XXGD4S2Z.js";
+import "../../chunks/chunk.USW4S5HZ.js";
+import "../../chunks/chunk.HMC6XL2M.js";
+import "../../chunks/chunk.AANKWLOE.js";
+import "../../chunks/chunk.ZQ7G474G.js";
+import "../../chunks/chunk.RKGCFOCD.js";
+import "../../chunks/chunk.O6L7CNGM.js";
+import "../../chunks/chunk.VXLBZXY3.js";
+import "../../chunks/chunk.3QOMHIHS.js";
+import "../../chunks/chunk.MHH4NIPT.js";
+import "../../chunks/chunk.QGC4W2JQ.js";
+import "../../chunks/chunk.EXOHZSKZ.js";
+import "../../chunks/chunk.EJSU7GFZ.js";
+import "../../chunks/chunk.FGNU55DN.js";
+import "../../chunks/chunk.GT5PEMIO.js";
+import "../../chunks/chunk.HVRBYPAL.js";
+import "../../chunks/chunk.V3WAYU6A.js";
+import "../../chunks/chunk.M2YES2WV.js";
+export {
+  CsPagination as default
+};

package/dist/unbundled/components/pagination/pagination.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/unbundled/components/pagination/pagination.styles.js

@@ -0,0 +1,8 @@
+/*! Cornerstone Components 0.1.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  pagination_styles_default
+} from "../../chunks/chunk.XXGD4S2Z.js";
+import "../../chunks/chunk.M2YES2WV.js";
+export {
+  pagination_styles_default as default
+};

package/dist/unbundled/components/popover/popover.d.ts

@@ -0,0 +1,79 @@
+import type { PropertyValues } from 'lit';
+import CornerstoneElement from '../../internal/cornerstone-element.js';
+import CsPopup from '../popup/popup.js';
+/**
+ * @summary Popovers display contextual content and interactive elements in a floating panel anchored to a trigger. Use
+ *  them for rich tooltips, menus, or any content that appears on demand without navigating away.
+ * @documentation https://cruglobal.github.io/cornerstone-design-system/components/popover
+ * @status stable
+ * @since 3.0
+ *
+ * @dependency cs-popup
+ *
+ * @slot - The popover's content. Interactive elements such as buttons and links are supported.
+ *
+ * @event cs-show - Emitted when the popover begins to show. Canceling this event will stop the popover from showing.
+ * @event cs-after-show - Emitted after the popover has shown and all animations are complete.
+ * @event cs-hide - Emitted when the popover begins to hide. Canceling this event will stop the popover from hiding.
+ * @event cs-after-hide - Emitted after the popover has hidden and all animations are complete.
+ *
+ * @csspart dialog - The native dialog element that contains the popover content.
+ * @csspart body - The popover's body where its content is rendered.
+ * @csspart popup - The internal `<cs-popup>` element that positions the popover.
+ * @csspart popup__popup - The popup's exported `popup` part. Use this to target the popover's popup container.
+ * @csspart popup__arrow - The popup's exported `arrow` part. Use this to target the popover's arrow.
+ *
+ * @cssproperty [--arrow-size=0.375rem] - The size of the tiny arrow that points to the popover (set to zero to remove).
+ * @cssproperty [--max-width=25rem] - The maximum width of the popover's body content.
+ * @cssproperty [--show-duration=var(--cs-transition-fast)] - The speed of the show animation.
+ * @cssproperty [--hide-duration=var(--cs-transition-fast)] - The speed of the hide animation.
+ *
+ * @cssstate open - Applied when the popover is open.
+ */
+export default class CsPopover extends CornerstoneElement {
+    static css: import("lit").CSSResult;
+    static dependencies: {
+        'cs-popup': typeof CsPopup;
+    };
+    dialog: HTMLDialogElement;
+    body: HTMLElement;
+    popup: CsPopup;
+    anchor: null | Element;
+    /**
+     * The preferred placement of the popover. Note that the actual placement may vary as needed to keep the popover
+     * inside of the viewport.
+     */
+    placement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+    /** Shows or hides the popover. */
+    open: boolean;
+    /** The distance in pixels from which to offset the popover away from its target. */
+    distance: number;
+    /** The distance in pixels from which to offset the popover along its target. */
+    skidding: number;
+    /** The ID of the popover's anchor element. This must be an interactive/focusable element such as a button. */
+    for: string | null;
+    /** Removes the arrow from the popover. */
+    withoutArrow: boolean;
+    private eventController;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(changedProperties: PropertyValues<typeof this>): void;
+    updated(changedProperties: PropertyValues<this>): void;
+    private handleAnchorClick;
+    private handleBodyClick;
+    private handleDocumentKeyDown;
+    private handleDocumentClick;
+    handleOpenChange(): Promise<void>;
+    handleForChange(): void;
+    handleOptionsChange(): Promise<void>;
+    /** Shows the popover. */
+    show(): Promise<void>;
+    /** Hides the popover. */
+    hide(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cs-popover': CsPopover;
+    }
+}

package/dist/unbundled/components/popover/popover.js

@@ -0,0 +1,24 @@
+/*! Cornerstone Components 0.1.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  CsPopover
+} from "../../chunks/chunk.Q4XLKG2M.js";
+import "../../chunks/chunk.3ZTAQSEB.js";
+import "../../chunks/chunk.BNGGMXK5.js";
+import "../../chunks/chunk.5MGJKMWB.js";
+import "../../chunks/chunk.A2JHAWF4.js";
+import "../../chunks/chunk.KCSF6NHY.js";
+import "../../chunks/chunk.37FJIXOD.js";
+import "../../chunks/chunk.N46QJHPG.js";
+import "../../chunks/chunk.E3WBPNHV.js";
+import "../../chunks/chunk.ITDZMCUA.js";
+import "../../chunks/chunk.AANKWLOE.js";
+import "../../chunks/chunk.QSXSR2S5.js";
+import "../../chunks/chunk.IQJMSIWD.js";
+import "../../chunks/chunk.3QOMHIHS.js";
+import "../../chunks/chunk.MHH4NIPT.js";
+import "../../chunks/chunk.QGC4W2JQ.js";
+import "../../chunks/chunk.EXOHZSKZ.js";
+import "../../chunks/chunk.M2YES2WV.js";
+export {
+  CsPopover as default
+};

package/dist/unbundled/components/popover/popover.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/unbundled/components/popover/popover.styles.js

@@ -0,0 +1,8 @@
+/*! Cornerstone Components 0.1.0 - MIT licensed. See LICENSE.md and NOTICE. */
+import {
+  popover_styles_default
+} from "../../chunks/chunk.3ZTAQSEB.js";
+import "../../chunks/chunk.M2YES2WV.js";
+export {
+  popover_styles_default as default
+};

package/dist/unbundled/components/popup/popup.d.ts

@@ -0,0 +1,161 @@
+import type { PropertyValues } from 'lit';
+import CornerstoneElement from '../../internal/cornerstone-element.js';
+export interface VirtualElement {
+    getBoundingClientRect: () => DOMRect;
+    contextElement?: Element;
+}
+/**
+ * @summary Popups declaratively anchor one element to another and keep them positioned together as the page scrolls or
+ *  resizes. Primarily a low-level building block for popovers, dropdowns, and tooltips.
+ * @documentation https://cruglobal.github.io/cornerstone-design-system/components/popup
+ * @status stable
+ * @since 2.0
+ *
+ * @event cs-reposition - Emitted when the popup is repositioned. This event can fire a lot, so avoid putting expensive
+ *  operations in your listener or consider debouncing it.
+ *
+ * @slot - The popup's content.
+ * @slot anchor - The element the popup will be anchored to. If the anchor lives outside of the popup, you can use the
+ *  `anchor` attribute or property instead.
+ *
+ * @csspart arrow - The arrow's container. Avoid setting `top|bottom|left|right` properties, as these values are
+ *  assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and
+ *  maybe a border or box shadow.
+ * @csspart popup - The popup's container. Useful for setting a background color, box shadow, etc.
+ * @csspart hover-bridge - The hover bridge element. Only available when the `hover-bridge` option is enabled.
+ *
+ * @cssproperty [--arrow-size=6px] - The size of the arrow. Note that an arrow won't be shown unless the `arrow`
+ *  attribute is used.
+ * @cssproperty [--popup-border-width] - The width of any custom border applied to the popup. This is used to reposition
+ *  the arrow to overlap to the inside edge of the popup border.
+ * @cssproperty [--arrow-color=black] - The color of the arrow.
+ * @cssproperty [--auto-size-available-width] - A read-only custom property that determines the amount of width the
+ *  popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only
+ *  available when using `auto-size`.
+ * @cssproperty [--auto-size-available-height] - A read-only custom property that determines the amount of height the
+ *  popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only
+ *  available when using `auto-size`.
+ * @cssproperty [--show-duration=var(--cs-transition-fast)] - The show duration to use when applying built-in animation classes.
+ * @cssproperty [--hide-duration=var(--cs-transition-fast)] - The hide duration to use when applying built-in animation classes.
+ */
+export default class CsPopup extends CornerstoneElement {
+    static css: import("lit").CSSResult;
+    private anchorEl;
+    private cleanup;
+    private readonly localize;
+    /** A reference to the internal popup container. Useful for animating and styling the popup with JavaScript. */
+    popup: HTMLElement;
+    private arrowEl;
+    /**
+     * This is intentionally set to false. Check the connectedCallback for further notes.
+     */
+    private SUPPORTS_POPOVER;
+    /**
+     * The element the popup will be anchored to. If the anchor lives outside of the popup, you can provide the anchor
+     * element `id`, a DOM element reference, or a `VirtualElement`. If the anchor lives inside the popup, use the
+     * `anchor` slot instead.
+     */
+    anchor: Element | string | VirtualElement;
+    /**
+     * Activates the positioning logic and shows the popup. When this attribute is removed, the positioning logic is torn
+     * down and the popup will be hidden.
+     */
+    active: boolean;
+    /**
+     * The preferred placement of the popup. Note that the actual placement will vary as configured to keep the
+     * panel inside of the viewport.
+     */
+    placement: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
+    /** The bounding box to use for flipping, shifting, and auto-sizing. */
+    boundary: 'viewport' | 'scroll';
+    /** The distance in pixels from which to offset the panel away from its anchor. */
+    distance: number;
+    /** The distance in pixels from which to offset the panel along its anchor. */
+    skidding: number;
+    /**
+     * Attaches an arrow to the popup. The arrow's size and color can be customized using the `--arrow-size` and
+     * `--arrow-color` custom properties. For additional customizations, you can also target the arrow using
+     * `::part(arrow)` in your stylesheet.
+     */
+    arrow: boolean;
+    /**
+     * The placement of the arrow. The default is `anchor`, which will align the arrow as close to the center of the
+     * anchor as possible, considering available space and `arrow-padding`. A value of `start`, `end`, or `center` will
+     * align the arrow to the start, end, or center of the popover instead.
+     */
+    arrowPlacement: 'start' | 'end' | 'center' | 'anchor';
+    /**
+     * The amount of padding between the arrow and the edges of the popup. If the popup has a border-radius, for example,
+     * this will prevent it from overflowing the corners.
+     */
+    arrowPadding: number;
+    /**
+     * When set, placement of the popup will flip to the opposite site to keep it in view. You can use
+     * `flipFallbackPlacements` to further configure how the fallback placement is determined.
+     */
+    flip: boolean;
+    /**
+     * If the preferred placement doesn't fit, popup will be tested in these fallback placements until one fits. Must be a
+     * string of any number of placements separated by a space, e.g. "top bottom left". If no placement fits, the flip
+     * fallback strategy will be used instead.
+     * */
+    flipFallbackPlacements: string;
+    /**
+     * When neither the preferred placement nor the fallback placements fit, this value will be used to determine whether
+     * the popup should be positioned using the best available fit based on available space or as it was initially
+     * preferred.
+     */
+    flipFallbackStrategy: 'best-fit' | 'initial';
+    /**
+     * The flip boundary describes clipping element(s) that overflow will be checked relative to when flipping. By
+     * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can
+     * change the boundary by passing a reference to one or more elements to this property.
+     */
+    flipBoundary: Element | Element[];
+    /** The amount of padding, in pixels, to exceed before the flip behavior will occur. */
+    flipPadding: number;
+    /** Moves the popup along the axis to keep it in view when clipped. */
+    shift: boolean;
+    /**
+     * The shift boundary describes clipping element(s) that overflow will be checked relative to when shifting. By
+     * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can
+     * change the boundary by passing a reference to one or more elements to this property.
+     */
+    shiftBoundary: Element | Element[];
+    /** The amount of padding, in pixels, to exceed before the shift behavior will occur. */
+    shiftPadding: number;
+    /** When set, this will cause the popup to automatically resize itself to prevent it from overflowing. */
+    autoSize: 'horizontal' | 'vertical' | 'both';
+    /** Syncs the popup's width or height to that of the anchor element. */
+    sync: 'width' | 'height' | 'both';
+    /**
+     * The auto-size boundary describes clipping element(s) that overflow will be checked relative to when resizing. By
+     * default, the boundary includes overflow ancestors that will cause the element to be clipped. If needed, you can
+     * change the boundary by passing a reference to one or more elements to this property.
+     */
+    autoSizeBoundary: Element | Element[];
+    /** The amount of padding, in pixels, to exceed before the auto-size behavior will occur. */
+    autoSizePadding: number;
+    /**
+     * When a gap exists between the anchor and the popup element, this option will add a "hover bridge" that fills the
+     * gap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane
+     * because the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is
+     * active.
+     */
+    hoverBridge: boolean;
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
+    updated(changedProperties: PropertyValues<this>): Promise<void>;
+    private handleAnchorChange;
+    private start;
+    private stop;
+    /** Forces the popup to recalculate and reposition itself. */
+    reposition(): void;
+    private updateHoverBridge;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cs-popup': CsPopup;
+    }
+}