plass-ui 0.0.1 → 1.0.1

package/dist/components/bottom-navigation/PlBottomNavigation.d.ts

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassElevation, PlassPosition, PlassStyleProps } from '../../types.js';
+/** A destination's value. The same restraint `PlTabs` and `PlSegmentedButton` put on theirs. */
+export type PlBottomNavigationValue = string | number;
+/**
+ * Which names are drawn.
+ *
+ * - `all` — every destination is named. The default, and the only one that works
+ *   for a reader who has not used the app before.
+ * - `selected` — only the destination that is current. The bar keeps its height
+ *   either way, because the named one is always the tallest; what changes is how
+ *   much of the row is words. The names the other items lose are still in the
+ *   document for a screen reader.
+ * - `none` — glyphs only, with every name read out but never drawn.
+ */
+export type PlBottomNavigationLabels = 'all' | 'selected' | 'none';
+export interface PlBottomNavigationProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'nav'>, 'color' | 'defaultValue' | 'onChange'> {
+    /** The destination the reader is on. Use with `onValueChange` for a controlled bar. */
+    value?: PlBottomNavigationValue | null;
+    /** Which starts current, for an uncontrolled bar. */
+    defaultValue?: PlBottomNavigationValue | null;
+    onValueChange?: (value: PlBottomNavigationValue) => void;
+    /**
+     * How the bar sits in the page's scroll.
+     *
+     * `fixed` — the default here, against the `static` a layout component would
+     * take — is what a bottom navigation *is*: held against the bottom edge of the
+     * window whatever the page does.
+     * @default 'fixed'
+     */
+    position?: PlassPosition;
+    /** Which names are drawn. @default 'all' */
+    labels?: PlBottomNavigationLabels;
+    /**
+     * Draws a hairline along the top edge, against the content the bar is over.
+     *
+     * On by default: a bar pinned over a scrolling page has content passing
+     * underneath it at every moment, and a translucent sheet with nothing marking
+     * its edge reads as part of that.
+     * @default true
+     */
+    divider?: boolean;
+    /**
+     * Keeps the bar clear of the home indicator on a phone, by adding
+     * `env(safe-area-inset-bottom)` under it. The sheet still reaches the bottom
+     * of the screen; only the items move up.
+     * @default true
+     */
+    safeArea?: boolean;
+    /**
+     * Drop shadow depth. `0` is the default and it is flat: the bar is attached to
+     * the edge of the window rather than floating over the middle of it, and
+     * `divider` is what separates it from the content.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+    /** Every destination stops answering. */
+    disabled?: boolean;
+    /** The name the bar is announced by — "Main", "Sections". */
+    label?: string;
+    /**
+     * Renders something other than a `<nav>`. Base UI's own escape hatch, and
+     * rarely what you want here: a row of destinations is navigation.
+     */
+    render?: useRender.RenderProp;
+    /** The `PlBottomNavigationItem`s. */
+    children?: React.ReactNode;
+}
+export interface PlBottomNavigationItemProps extends Omit<React.ComponentPropsWithoutRef<'button'>, 'value' | 'color'> {
+    /** Identifies the destination. What `onValueChange` reports. */
+    value: PlBottomNavigationValue;
+    /** The glyph above the name. Sized on the standalone-glyph ladder. */
+    icon?: React.ReactNode;
+    /** Renders the item as a link rather than as a button. */
+    href?: string;
+    /** Unavailable, but still part of the set. */
+    disabled?: boolean;
+    /** The destination's name. Read out even when `labels` keeps it undrawn. */
+    children?: React.ReactNode;
+}
+/**
+ * A row of destinations held against the bottom edge of the window.
+ *
+ * It is a `<nav>` rather than a `role="tablist"`, and its items are ordinary
+ * links or buttons rather than tabs. That is a deliberate choice about what is
+ * being promised: a tab list owes a keyboard reader one tab stop for the whole
+ * set and arrow keys within it, and it owes a screen reader a panel per tab. A
+ * bottom navigation switches what the *page* is, not which panel of one is
+ * showing, and claiming the role without the behaviour is worse for a keyboard
+ * reader than never claiming it. What is claimed instead is `aria-current`,
+ * which is the honest statement: this is the destination you are on.
+ *
+ * The sheet is never dyed, exactly as on a `PlCard`. What carries the colour
+ * family is the one item that is current.
+ */
+export declare const PlBottomNavigation: React.ForwardRefExoticComponent<PlBottomNavigationProps & React.RefAttributes<HTMLElement>>;
+/**
+ * One destination.
+ *
+ * It has no `size`, no `color` and no `variant` of its own: all three belong to
+ * the bar, which is the only place they can be set once and mean the same thing
+ * for every item.
+ *
+ * With an `href` it is a real `<a>`, which is what makes a long press offer
+ * "open in a new tab" and what puts the destination in the status bar — neither
+ * of which a `<button>` that calls `router.push` can do. Without one it is a
+ * `<button>`, because a `<div>` carrying a click handler is invisible to a
+ * keyboard.
+ */
+export declare const PlBottomNavigationItem: React.ForwardRefExoticComponent<PlBottomNavigationItemProps & React.RefAttributes<HTMLElement>>;

package/dist/components/bottom-navigation/PlBottomNavigation.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,Fragment as a,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{useRender as s}from"@base-ui/react/use-render";import{cx as i,focusRingInsetClasses as n,hasContent as r,iconSizeClasses as o,metaTextClasses as c,radiusClasses as d,sheetLineClasses as m,sheetRestClasses as u,srOnlyClasses as p,surfaceSlots as f,transitionClasses as g}from"../../internal/styles.js";const h=/* @__PURE__ */l.createContext({value:null,change:()=>{},size:"md",density:"default",labels:"all",disabled:!1}),x={static:"",sticky:"sticky bottom-0 z-20",fixed:"fixed inset-x-0 bottom-0 z-30"},v={xs:"min-h-10",sm:"min-h-12",md:"min-h-14",lg:"min-h-16",xl:"min-h-18"},b={default:{xs:"p-1",sm:"p-1",md:"p-1.5",lg:"p-2",xl:"p-2.5"},compact:{xs:"p-0.5",sm:"p-0.5",md:"p-1",lg:"p-1",xl:"p-1.5"}},y={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const PlBottomNavigation=/* @__PURE__ */l.forwardRef(function PlBottomNavigation({variant:a="glass",size:t="md",color:n="primary",density:r="default",elevation:o=0,value:c,defaultValue:p=null,onValueChange:y,position:N="fixed",labels:w="all",divider:z=!0,safeArea:k=!0,disabled:C=!1,label:j,render:P,className:B,style:I,children:R,...V},A){const[D,F]=l.useState(p),M=void 0!==c,S=M?c:D,q=l.useCallback(e=>{M||F(e),y?.(e)},[M,y]),E=l.useMemo(()=>({value:S??null,change:q,size:t,density:r,labels:w,disabled:C}),[S,q,t,r,w,C]),G=i("w-full min-w-0","static"===N?d[t]:"",u[a],"glass"===a&&"static"!==N?"border-0":"",z?m:"",x[N],k?"pb-[env(safe-area-inset-bottom)]":"",g,B);return s({render:P??e("nav",{}),ref:A,props:{"aria-label":j,className:G,style:{...f(n,o),...I},children:e(h.Provider,{value:E,children:e("div",{className:i("flex w-full items-stretch",v[t],b[r][t]),children:R})}),...V}})});export const PlBottomNavigationItem=/* @__PURE__ */l.forwardRef(function PlBottomNavigationItem({value:s,icon:m,href:u,disabled:f=!1,className:x,children:v,onClick:b,...N},w){const z=l.useContext(h),k=f||z.disabled,C=null!==z.value&&z.value===s,j="all"===z.labels||"selected"===z.labels&&C,P=i("flex min-w-0 flex-1 flex-col items-center justify-center px-1 py-1.5",y[z.size],d[z.size],"[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",g,n,k?"cursor-not-allowed opacity-50 saturate-[0.35] text-(--plass-muted-fg)":C?"cursor-pointer font-medium text-(--p-accent) bg-(--p-soft) hover:bg-(--p-soft-hover)":"cursor-pointer text-(--plass-muted-fg) hover:text-(--plass-fg) hover:bg-(--plass-glass-hover)",x),B=t(a,{children:[r(m)?e("span",{className:i("flex shrink-0 items-center justify-center",o[z.size]),children:m}):null,r(v)?e("span",{className:j?i("max-w-full truncate leading-tight",c[z.size]):p,children:v}):null]}),press=e=>{k?e.preventDefault():(z.change(s),b?.(e))};return u?e("a",{ref:w,href:k?void 0:u,"aria-current":C?"page":void 0,"aria-disabled":k||void 0,className:P,onClick:press,...N,children:B}):e("button",{ref:w,type:"button",disabled:k,"aria-current":C?"page":void 0,className:P,onClick:press,...N,children:B})});

package/dist/components/bottom-navigation/index.d.ts

@@ -0,0 +1,2 @@
+export { PlBottomNavigation, PlBottomNavigationItem } from './PlBottomNavigation.js';
+export type { PlBottomNavigationItemProps, PlBottomNavigationLabels, PlBottomNavigationProps, PlBottomNavigationValue } from './PlBottomNavigation.js';

package/dist/components/bottom-navigation/index.js

@@ -0,0 +1 @@
+export{PlBottomNavigation,PlBottomNavigationItem}from"./PlBottomNavigation.js";

package/dist/components/box/PlBox.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassElevation, PlassStyleProps } from '../../types.js';
+export interface PlBoxProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * Drop shadow depth. `0` is the default and it is flat — the glass edge is
+     * what separates the box from the page. Raise it only for a surface that
+     * genuinely floats above the content around it.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+    /**
+     * Inner padding, on the `size` / `density` scale. Turn it off for full-bleed
+     * content — an image, a table, a list that draws its own rows.
+     * @default true
+     */
+    padded?: boolean;
+    /**
+     * Renders something other than a `<div>`: `render={<section />}`,
+     * `render={<li />}`, or a function for full control. Base UI's own escape
+     * hatch, so it behaves the same here as on every Base UI primitive.
+     */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * A sheet of glass with content on it. The plainest surface in the library: it
+ * groups things, and that is all it does.
+ *
+ * Everything structural — a title, a footer, hairlines between sections —
+ * belongs to `PlCard`, which is a box with those sections laid out on it. What
+ * is left here is the sheet itself, and the reason it is worth having on its own
+ * is that most of what a screen groups has no heading: a well behind a form, a
+ * tile in a shelf, a panel round a chart.
+ *
+ * `size` means something different here from what it means on a control, and
+ * this is the one place in the library where that is true. A box is as tall as
+ * what it holds, and its children bring their own typography — a container that
+ * reset the type scale would render the same paragraph at two sizes depending
+ * on what it was wrapped in. So `size` is the size of the **sheet**: its radius
+ * and its padding, and nothing else.
+ *
+ * The three materials say what they say everywhere else, read as a container's:
+ * the sheet is never dyed, because what a box holds arrives with its own
+ * colours and tinting the pane under them puts every one on a background it was
+ * not chosen against. The family reaches the hairline and the focus ring and
+ * stops. `ghost` is the one to reach for inside another surface, where a second
+ * bordered rectangle is a second rectangle.
+ */
+export declare const PlBox: React.ForwardRefExoticComponent<PlBoxProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/box/PlBox.js

@@ -0,0 +1 @@
+"use client";import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{useRender as s}from"@base-ui/react/use-render";import{cx as t,radiusClasses as o,sheetPaddingXClasses as a,sheetPaddingYClasses as i,sheetRestClasses as n,surfaceSlots as l,transitionClasses as c}from"../../internal/styles.js";export const PlBox=/* @__PURE__ */r.forwardRef(function PlBox({variant:r="glass",size:d="md",color:m="primary",density:f="default",elevation:p=0,padded:u=!0,render:x,className:y,style:j,children:v,...b},h){const B=t("block",o[d],u?`${a[f][d]} ${i[f][d]}`:"",n[r],c,y);return s({render:x??e("div",{}),ref:h,props:{className:B,style:{...l(m,p),...j},children:v,...b}})});

package/dist/components/box/index.d.ts

@@ -0,0 +1,2 @@
+export { PlBox } from './PlBox.js';
+export type { PlBoxProps } from './PlBox.js';

package/dist/components/box/index.js

@@ -0,0 +1 @@
+export{PlBox}from"./PlBox.js";

package/dist/components/breadcrumb/PlBreadcrumb.d.ts

@@ -0,0 +1,138 @@
+import * as React from 'react';
+import type { PlassColor, PlassDensity, PlassSize } from '../../types.js';
+/**
+ * What is drawn between two steps of the trail.
+ *
+ * Four named marks rather than a free-for-all, because a separator is read
+ * hundreds of times a day and the difference between them is meaning, not
+ * decoration: a `chevron` and an `arrow` say "and then", a `slash` says "path",
+ * a `dot` says "these are peers of one thing". Anything else can still be passed
+ * as a node.
+ */
+export type PlBreadcrumbSeparator = 'chevron' | 'arrow' | 'slash' | 'dot';
+export interface PlBreadcrumbProps extends Omit<React.ComponentPropsWithoutRef<'nav'>, 'color'> {
+    /** @default 'md' */
+    size?: PlassSize;
+    /**
+     * The colour family a link picks up when it is hovered.
+     * @default 'primary'
+     */
+    color?: PlassColor;
+    /**
+     * How tightly the steps pack. Spacing only.
+     * @default 'default'
+     */
+    density?: PlassDensity;
+    /**
+     * The mark between two steps. One of the four names, or any node.
+     * @default 'chevron'
+     */
+    separator?: PlBreadcrumbSeparator | React.ReactNode;
+    /**
+     * How many steps to show before the middle is folded away behind a `…`. Left
+     * out, the whole trail is shown however long it gets.
+     */
+    maxItems?: number;
+    /**
+     * How many steps stay at the front of a folded trail.
+     * @default 1
+     */
+    itemsBeforeCollapse?: number;
+    /**
+     * How many stay at the end.
+     * @default 1
+     */
+    itemsAfterCollapse?: number;
+    /**
+     * Whether pressing the `…` unfolds the trail in place. Turn it off to leave
+     * the fold as a plain mark.
+     * @default true
+     */
+    expandable?: boolean;
+    /**
+     * The name the trail is announced by. Never drawn.
+     * @default 'Breadcrumb'
+     */
+    label?: string;
+    /**
+     * What the `…` is announced as. Never drawn.
+     * @default 'Show the hidden steps'
+     */
+    expandLabel?: string;
+    /**
+     * Emits the trail a second time as a `BreadcrumbList`, in a
+     * `<script type="application/ld+json">` beside the markup.
+     *
+     * Off by default, because a page can only have one of these and a great many
+     * apps already emit theirs from an SEO layer of their own — two would be a
+     * page describing itself twice. Turn it on where this component *is* the
+     * trail: correct markup alone is not what puts a path under a search result,
+     * and the structured data is.
+     *
+     * Every step goes in, including the ones a `maxItems` fold is hiding — what is
+     * collapsed is a matter of how much room the row has, and the path is the path
+     * either way.
+     * @default false
+     */
+    structuredData?: boolean;
+    /**
+     * What relative `href`s are resolved against for `structuredData` — the site's
+     * origin, as `https://example.com`.
+     *
+     * Search engines want an absolute URL there. Without this the `href`s are
+     * emitted exactly as written, which is right when they are already absolute
+     * and not much use when they are not.
+     */
+    baseUrl?: string;
+    /** The `PlBreadcrumbItem`s. */
+    children?: React.ReactNode;
+}
+export interface PlBreadcrumbItemProps extends Omit<React.ComponentPropsWithoutRef<'li'>, 'color' | 'onClick'> {
+    /** Renders the step as a link. */
+    href?: string;
+    /** Fires when the step is pressed. Renders it as a button when there is no `href`. */
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    /** Content before the label — a home glyph, a repository avatar. */
+    startIcon?: React.ReactNode;
+    /** Content after the label. */
+    endIcon?: React.ReactNode;
+    /**
+     * Marks this step as the page you are on, which stops it being a link.
+     *
+     * The last step is the current one on its own, so this is only needed for a
+     * trail that ends somewhere the reader is not — and setting it anywhere takes
+     * the mark off the last step, because only one step in a trail can be it.
+     */
+    current?: boolean;
+    /** Unavailable. Stops answering, keeps its place in the trail. */
+    disabled?: boolean;
+    /** The step's label. */
+    children?: React.ReactNode;
+}
+/**
+ * The trail of pages above the one being read.
+ *
+ * Two things make this more than a row of links. The first is that the last step
+ * is where the reader already is, so it is not a link at all — it carries
+ * `aria-current="page"` and stops being pressable, and the component works that
+ * out rather than asking every caller to remember it. The second is the fold: a
+ * trail seven levels deep is a trail nobody reads, so the middle collapses to a
+ * `…` that puts it back when pressed.
+ *
+ * The separators are drawn by the trail rather than by the steps. A step does
+ * not know whether anything follows it, and a mark that belonged to a step would
+ * have to be taken off the last one by hand.
+ *
+ * There is no `variant` and no `elevation`: a trail is a line of text above the
+ * page, not a surface laid on it.
+ */
+export declare const PlBreadcrumb: React.ForwardRefExoticComponent<PlBreadcrumbProps & React.RefAttributes<HTMLElement>>;
+/**
+ * One step of the trail.
+ *
+ * It renders three different things and the caller picks by what they pass: an
+ * `<a>` with an `href`, a `<button>` with an `onClick`, and a plain `<span>` with
+ * neither — which is what the last step is, because the page you are already on
+ * is not somewhere to go.
+ */
+export declare const PlBreadcrumbItem: React.ForwardRefExoticComponent<PlBreadcrumbItemProps & React.RefAttributes<HTMLLIElement>>;

package/dist/components/breadcrumb/PlBreadcrumb.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import*as a from"react";import{ArrowRightIcon as s,ChevronIcon as n,EllipsisIcon as l}from"../../internal/icons.js";import{controlTextClasses as i,cx as c,focusRingClasses as o,gapClasses as m,hasContent as p,iconClasses as d,radiusClasses as u,transitionClasses as f}from"../../internal/styles.js";const h=/* @__PURE__ */a.createContext({size:"md",last:!1}),x={default:{xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"},compact:{xs:"gap-0.5",sm:"gap-1",md:"gap-1",lg:"gap-1.5",xl:"gap-2"}},g={xs:u.xs,sm:u.xs,md:u.xs,lg:u.sm,xl:u.sm},b=["chevron","arrow","slash","dot"];function textOf(e){return"string"==typeof e||"number"==typeof e?String(e):Array.isArray(e)?e.map(textOf).join(""):a.isValidElement(e)?textOf(e.props.children):""}function absoluteHref(e,t){if(!t)return e;try{return new URL(e,t).href}catch{return e}}function breadcrumbListData(e,t){const r=e.map((e,r)=>{const{href:a,children:s}=e.props;return{"@type":"ListItem",position:r+1,name:textOf(s),...a?{item:absoluteHref(a,t)}:null}});return JSON.stringify({"@context":"https://schema.org","@type":"BreadcrumbList",itemListElement:r}).replace(/</g,"\\u003c")}export const PlBreadcrumb=/* @__PURE__ */a.forwardRef(function PlBreadcrumb({size:r="md",color:m="primary",density:p="default",separator:u="chevron",maxItems:g,itemsBeforeCollapse:y=1,itemsAfterCollapse:N=1,expandable:v=!0,label:w="Breadcrumb",expandLabel:k="Show the hidden steps",structuredData:C=!1,baseUrl:B,className:L,style:j,children:I,...S},M){const[O,P]=a.useState(!1),z=a.Children.toArray(I).filter(a.isValidElement),A=z.length,D=z.some(e=>!0===e.props.current),E=!O&&void 0!==g&&A>Math.max(g,1)&&A-y-N>1?[...z.slice(0,Math.max(0,y)),null,...z.slice(A-Math.max(0,N))]:z,H=function isSeparatorName(e){return"string"==typeof e&&b.includes(e)}(u)?function separatorMark(t){switch(t){case"chevron":return e("span",{className:"flex -rotate-90 items-center rtl:rotate-90",children:e(n,{})});case"arrow":return e("span",{className:"flex items-center rtl:rotate-180",children:e(s,{})});case"slash":return e("span",{className:"opacity-70",children:"/"});case"dot":return e("span",{className:"opacity-70",children:"·"});default:return null}}(u):u,R=c("inline-flex items-center rounded-(--plass-radius-xs) px-0.5","text-(--plass-muted-fg)",f,d,v?c("cursor-pointer hover:bg-(--p-soft) hover:text-(--p-accent)",o):"");return t("nav",{ref:M,"aria-label":w,className:c("flex",i[r],d,L),style:{"--p-accent":`var(--plass-${m}-accent)`,"--p-soft":`var(--plass-${m}-soft)`,"--p-ring":`var(--plass-${m}-ring)`,...j},...S,children:[C&&A>0?e("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:breadcrumbListData(z,B)}}):null,e("ol",{role:"list",className:c("flex list-none flex-wrap items-center p-0",x[p][r]),children:E.map((s,n)=>t(a.Fragment,{children:[n>0?e("li",{"aria-hidden":"true",className:"flex shrink-0 items-center text-(--plass-muted-fg) select-none",children:H}):null,s?e(h.Provider,{value:{size:r,last:!D&&n===E.length-1},children:s}):e("li",{className:"flex shrink-0 items-center",children:v?e("button",{type:"button",className:R,"aria-label":k,onClick:()=>P(!0),children:e(l,{})}):e("span",{className:R,"aria-hidden":"true",children:e(l,{})})})]},s?s.key??n:"fold"))})]})});export const PlBreadcrumbItem=/* @__PURE__ */a.forwardRef(function PlBreadcrumbItem({href:s,onClick:n,startIcon:l,endIcon:i,current:d,disabled:u=!1,className:x,children:b,...y},N){const{size:v,last:w}=a.useContext(h),k=d??w,C=Boolean(s||n)&&!k&&!u,B=c("inline-flex min-w-0 items-center px-1",m[v],g[v],f,u?"cursor-not-allowed text-(--plass-muted-fg) opacity-50":k?"font-medium text-(--plass-fg)":C?c("cursor-pointer text-(--plass-muted-fg)","hover:bg-(--p-soft) hover:text-(--p-accent)",o):"text-(--plass-muted-fg)"),L=t(r,{children:[p(l)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:l}):null,e("span",{className:"truncate",children:b}),p(i)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:i}):null]});return e("li",{ref:N,className:c("flex min-w-0 items-center",x),...y,children:C&&s?e("a",{href:s,className:B,onClick:n,children:L}):C?e("button",{type:"button",className:B,onClick:n,children:L}):e("span",{className:B,"aria-current":k?"page":void 0,"aria-disabled":u||void 0,children:L})})});

package/dist/components/breadcrumb/index.d.ts

@@ -0,0 +1,2 @@
+export { PlBreadcrumb, PlBreadcrumbItem } from './PlBreadcrumb.js';
+export type { PlBreadcrumbItemProps, PlBreadcrumbProps, PlBreadcrumbSeparator } from './PlBreadcrumb.js';

package/dist/components/breadcrumb/index.js

@@ -0,0 +1 @@
+export{PlBreadcrumb,PlBreadcrumbItem}from"./PlBreadcrumb.js";

package/dist/components/button/{Button.d.ts → PlButton.d.ts}

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { PlassElevation, PlassStyleProps } from '../../types';
-export interface ButtonProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'button'>, 'color'> {
+import type { PlassElevation, PlassStyleProps } from '../../types.js';
+export interface PlButtonProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'button'>, 'color'> {
     /**
      * Drop shadow depth. `1` is the default, because a moulded key **rests on**
      * the sheet rather than lying flush with it. Hover adds a level and pressing
@@ -39,4 +39,4 @@ export interface ButtonProps extends PlassStyleProps, Omit<React.ComponentPropsW
     render?: useRender.RenderProp;
     children?: React.ReactNode;
 }
-export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const PlButton: React.ForwardRefExoticComponent<PlButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/button/PlButton.js

@@ -0,0 +1 @@
+"use client";import{jsx as s,Fragment as e,jsxs as o}from"react/jsx-runtime";import*as r from"react";import{Button as a}from"@base-ui/react/button";import{useRender as t}from"@base-ui/react/use-render";import{ButtonGroupContext as l}from"../../internal/button-group.js";import{Spinner as n}from"../../internal/icons.js";import{controlHeightClasses as i,controlSlots as p,controlSquareClasses as d,controlTextClasses as v,disabledClasses as c,focusRingClasses as g,gapClasses as m,glassClasses as x,hasContent as b,iconClasses as f,paddingXClasses as h,radiusClasses as u,readOnlyFilterClasses as $,transitionClasses as j}from"../../internal/styles.js";const y={xs:`${i.xs} ${m.xs} ${u.xs} ${v.xs}`,sm:`${i.sm} ${m.sm} ${u.sm} ${v.sm}`,md:`${i.md} ${m.md} ${u.md} ${v.md}`,lg:`${i.lg} ${m.lg} ${u.lg} ${v.lg}`,xl:`${i.xl} ${m.xl} ${u.xl} ${v.xl}`},w={xs:`${d.xs} px-0`,sm:`${d.sm} px-0`,md:`${d.md} px-0`,lg:`${d.lg} px-0`,xl:`${d.xl} px-0`},P=/* @__PURE__ */["relative inline-flex shrink-0 select-none items-center justify-center","whitespace-nowrap align-middle font-semibold leading-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",j,g,f].join(" "),k={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]"].join(" "),glass:/* @__PURE__ */[x,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--p-accent) bg-transparent"},B={solid:/* @__PURE__ */["hover:brightness-105","hover:[box-shadow:var(--p-elev-hover),var(--p-lift-hover)]","active:brightness-95","active:[box-shadow:var(--p-elev-press),var(--p-lift-press)]"].join(" "),glass:/* @__PURE__ */["hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)]","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:bg-(--plass-glass-press)","active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),ghost:"hover:bg-(--p-soft) active:bg-(--p-soft-hover)"},C={solid:/* @__PURE__ */["cursor-default text-(--p-on-solid) [background-image:var(--p-fill)]",`shadow-none ${$}`].join(" "),glass:/* @__PURE__ */[x,"cursor-default border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]",`[box-shadow:var(--plass-gloss-glass)] ${$}`].join(" "),ghost:`cursor-default text-(--p-accent) bg-transparent ${$}`};export const PlButton=/* @__PURE__ */r.forwardRef(function PlButton({variant:i,size:d,color:v,density:g,elevation:m,startIcon:x,endIcon:f,loading:u=!1,readOnly:$=!1,fullWidth:j=!1,disabled:z,render:E,className:I,style:M,children:N,onClick:D,onPointerMove:F,...O},R){const T=r.useContext(l),W=i??T?.variant??"solid",X=d??T?.size??"md",Y=v??T?.color??"primary",q=g??T?.density??"default",A=m??T?.elevation??1,G=z??T?.disabled??!1,H=!b(N),J=u||$,K=!G&&!J,L=[P,y[X],H?w[X]:h[q][X],G?c[W]:$?C[W]:k[W],K?`${B[W]} cursor-pointer`:"",K?"plass-glow":"",u?"cursor-progress":"",j?"w-full":"",I??""].filter(Boolean).join(" ");return t({render:E??s(a,{disabled:G}),ref:R,props:{className:L,style:{...p(Y,A,W),...M},"aria-disabled":J||void 0,"aria-busy":u||void 0,"data-loading":u||void 0,"data-readonly":$||void 0,onClick:s=>{if(J)return s.preventDefault(),void s.stopPropagation();D?.(s)},onPointerMove:s=>{const e=s.currentTarget;e.style.setProperty("--p-mx",`${s.nativeEvent.offsetX}px`),e.style.setProperty("--p-my",`${s.nativeEvent.offsetY}px`),F?.(s)},...O,children:o(e,{children:[u?s(n,{}):x,N,f]})}})});

package/dist/components/button/index.d.ts

@@ -1,2 +1,2 @@
-export { Button } from './Button';
-export type { ButtonProps } from './Button';
+export { PlButton } from './PlButton.js';
+export type { PlButtonProps } from './PlButton.js';

package/dist/components/button/index.js

@@ -1 +1 @@
-export{Button}from"./Button";
+export{PlButton}from"./PlButton.js";

package/dist/components/button-group/PlButtonGroup.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import type { PlassElevation, PlassOrientation, PlassStyleProps } from '../../types.js';
+export interface PlButtonGroupProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * Which way the buttons run. A vertical group is a stacked menu of equal
+     * actions; a horizontal one is the default because that is what a toolbar is.
+     * @default 'horizontal'
+     */
+    orientation?: PlassOrientation;
+    /** Drop shadow depth, passed to every button in the group. */
+    elevation?: PlassElevation;
+    /** Disables every button in the group at once. */
+    disabled?: boolean;
+    /** Stretches to the container and divides the width evenly between buttons. */
+    fullWidth?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * A run of buttons that belong together.
+ *
+ * Two things are happening here and only one of them is visual. The corners
+ * that face a neighbour are squared off — that is the look. The other half is
+ * that `variant`, `size`, `color`, `density`, `elevation` and `disabled` are
+ * stated once for the set rather than repeated on every button; a group where
+ * one button is a size out is the failure this exists to prevent.
+ *
+ * The buttons stay real `PlButton`s and nothing about them is replaced. Which
+ * also means this is **not** a segmented control and it does not manage
+ * selection: for one-of-a-set reach for `PlSegmentedButton`, which is what that
+ * actually is.
+ */
+export declare const PlButtonGroup: React.ForwardRefExoticComponent<PlButtonGroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/button-group/PlButtonGroup.js

@@ -0,0 +1 @@
+"use client";import{jsx as o}from"react/jsx-runtime";import*as e from"react";import{ButtonGroupContext as i}from"../../internal/button-group.js";import{cx as t}from"../../internal/styles.js";const n={horizontal:"[&>*:not(:first-child)]:rounded-s-none [&>*:not(:last-child)]:rounded-e-none",vertical:"[&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none"},r={horizontal:"[&>*:not(:first-child)]:-ms-px",vertical:"[&>*:not(:first-child)]:-mt-px"},l=/* @__PURE__ */["inline-flex align-middle","[&>*]:relative [&>*:hover]:z-10 [&>*:focus-visible]:z-10","[&>*]:shrink-0"].join(" ");export const PlButtonGroup=/* @__PURE__ */e.forwardRef(function PlButtonGroup({variant:s,size:a,color:d,density:c,elevation:f,orientation:u="horizontal",disabled:h,fullWidth:m=!1,className:v,children:p,...x},z){const b=e.useMemo(()=>({variant:s,size:a,color:d,density:c,elevation:f,disabled:h}),[s,a,d,c,f,h]);return o(i.Provider,{value:b,children:o("div",{ref:z,role:"group",className:t(l,"vertical"===u?"flex-col":"flex-row",n[u],"glass"===(s??"solid")?r[u]:"",m?"flex w-full [&>*]:flex-1":"",v),...x,children:p})})});

package/dist/components/button-group/index.d.ts

@@ -0,0 +1,2 @@
+export { PlButtonGroup } from './PlButtonGroup.js';
+export type { PlButtonGroupProps } from './PlButtonGroup.js';

package/dist/components/button-group/index.js

@@ -0,0 +1 @@
+export{PlButtonGroup}from"./PlButtonGroup.js";

package/dist/components/card/PlCard.d.ts

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassElevation, PlassStyleProps } from '../../types.js';
+export interface PlCardProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title'> {
+    /**
+     * Drop shadow depth. `1` is the default: a card is a sheet lying **on** the
+     * page wash rather than printed into it, and the small amount of grey under
+     * it is what says so.
+     * @default 1
+     */
+    elevation?: PlassElevation;
+    /**
+     * The card's heading. A plain string is styled as the title; pass a real
+     * heading element (`title={<h2>…</h2>}`) when the card belongs in the
+     * document outline — it inherits the title's typography rather than the
+     * browser's.
+     */
+    title?: React.ReactNode;
+    /** A second line under the title, one step down the type scale and muted. */
+    subtitle?: React.ReactNode;
+    /**
+     * Content pinned to the end of the header row — a menu button, a status
+     * chip. Stays on the title's line while the title wraps beside it.
+     */
+    headerAction?: React.ReactNode;
+    /**
+     * The bottom area. Laid out as a wrapping row so a pair of buttons needs no
+     * wrapper of its own; anything else can bring its own layout.
+     */
+    footer?: React.ReactNode;
+    /**
+     * Scores the sheet between sections with a hairline instead of separating
+     * them with space. The rules run the full width, so the padding moves from
+     * the card onto each section.
+     * @default false
+     */
+    dividers?: boolean;
+    /**
+     * Inner padding, on the `size` / `density` scale. Turn it off for full-bleed
+     * content — an image, a table, a list that draws its own rows.
+     * @default true
+     */
+    padded?: boolean;
+    /**
+     * Lifts the sheet under the pointer and adds a level of elevation.
+     *
+     * This is the one place the library allows a `transform`, and the exception
+     * is the rule rather than a hole in it: what may not move is the thing under
+     * the finger — a key whose label resamples as it scales. A sheet that
+     * *holds* content is the other kind of surface, and lifting one is how a
+     * pane of glass says it can be picked up.
+     *
+     * It changes how the card looks and nothing else. A card that is actually
+     * clickable has to be a real element: `render={<a href="…" />}` or
+     * `render={<button type="button" />}`, so it is focusable, announced, and
+     * reachable from a keyboard.
+     * @default false
+     */
+    interactive?: boolean;
+    /**
+     * Renders something other than a `<div>`: `render={<section />}`,
+     * `render={<li />}`, `render={<a href="…" />}`. Base UI's own escape hatch.
+     */
+    render?: useRender.RenderProp;
+    /** The card's body. */
+    children?: React.ReactNode;
+}
+/**
+ * The sheet everything else on a screen is grouped onto, with the parts a card
+ * is made of laid out on it: a title, a subtitle, a body and a footer.
+ *
+ * The sections are props rather than compound sub-components — `<Card.Header>`,
+ * `<Card.Title>` — for the same reason `PlTextField` takes `label` and
+ * `description` as props: the arrangement is fixed, and what a caller wants to
+ * decide is what goes in each slot, not what order the slots come in.
+ *
+ * There is no Base UI primitive under this, and there should not be. A card has
+ * no interaction to delegate: it is a surface with a layout, and the moment it
+ * becomes something you press it is a `render` away from being a real one.
+ */
+export declare const PlCard: React.ForwardRefExoticComponent<PlCardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/card/PlCard.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as s,Fragment as r}from"react/jsx-runtime";import*as a from"react";import{useRender as l}from"@base-ui/react/use-render";import{focusRingClasses as o,hasContent as t,metaTextClasses as n,radiusClasses as i,sheetBodyClasses as c,sheetHeaderGapClasses as d,sheetLineClasses as v,sheetPaddingXClasses as p,sheetPaddingYClasses as m,sheetRestClasses as f,sheetSectionGapClasses as h,sheetTitleClasses as u,surfaceSlots as g}from"../../internal/styles.js";const x=/* @__PURE__ */["[transition-property:background-color,border-color,box-shadow,color,transform]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]"].join(" "),b={solid:/* @__PURE__ */["cursor-pointer hover:-translate-y-0.5","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:translate-y-0 active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */["cursor-pointer hover:-translate-y-0.5 hover:bg-(--plass-glass-hover)","hover:[border-color:var(--p-line)]","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:translate-y-0 active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),ghost:"cursor-pointer hover:bg-(--p-soft) active:bg-(--p-soft-hover)"};export const PlCard=/* @__PURE__ */a.forwardRef(function PlCard({variant:a="glass",size:y="md",color:N="primary",density:$="default",elevation:j=1,title:w,subtitle:k,headerAction:B,footer:C,dividers:P=!1,padded:z=!0,interactive:A=!1,render:F,className:R,style:q,children:D,...E},G){const H=z?p[$][y]:"",I=z?m[$][y]:"",J=P?`${H} ${I}`:H,K=t(w)||t(k)||t(B),L=s(r,{children:[t(w)||t(k)?s("div",{className:`flex min-w-0 flex-1 flex-col ${d[y]}`,children:[t(w)?e("div",{className:`plass-title font-semibold ${u[y]}`,children:w}):null,t(k)?e("div",{className:`text-(--plass-muted-fg) ${n[y]}`,children:k}):null]}):null,t(B)?e("div",{className:"ml-auto shrink-0",children:B}):null]}),M=[K?{key:"header",className:"flex items-start gap-3",content:L}:null,t(D)?{key:"content",className:c[y],content:D}:null,t(C)?{key:"footer",className:`flex flex-wrap items-center gap-2 ${c[y]}`,content:C}:null].filter(e=>null!==e),O=["flex flex-col",i[y],f[a],x,A?`${b[a]} ${o}`:"",P?"overflow-hidden":`${I} ${h[y]}`,R??""].filter(Boolean).join(" ");return l({render:F??e("div",{}),ref:G,props:{className:O,style:{...g(N,j),...q},...E,children:M.map((s,r)=>e("div",{className:[J,s.className,P&&r>0?v:""].filter(Boolean).join(" "),children:s.content},s.key))}})});

package/dist/components/card/index.d.ts

@@ -0,0 +1,2 @@
+export { PlCard } from './PlCard.js';
+export type { PlCardProps } from './PlCard.js';

package/dist/components/card/index.js

@@ -0,0 +1 @@
+export{PlCard}from"./PlCard.js";

package/dist/components/carousel/PlCarousel.d.ts

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import type { PlassElevation, PlassStyleProps } from '../../types.js';
+export interface PlCarouselProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
+    /**
+     * Drop shadow depth of the frame. `0` — the default — is flat.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+    /** Which slide is showing, counted from 0. Use with `onValueChange`. */
+    value?: number;
+    /** Which starts showing, for an uncontrolled carousel. @default 0 */
+    defaultValue?: number;
+    onValueChange?: (index: number) => void;
+    /**
+     * Whether the arrows wrap from the last slide back to the first. With it off
+     * they go inert at the ends instead, which is the honest thing for a set that
+     * has a beginning and an end — a gallery of three photographs does, a
+     * rotating banner does not.
+     * @default true
+     */
+    loop?: boolean;
+    /**
+     * Advances on its own.
+     *
+     * Off by default and deliberately so: a carousel that moves while it is being
+     * read is the most complained-about pattern on the web. It pauses on hover,
+     * on focus anywhere inside it, while the tab is in the background, and it
+     * does not start at all for a reader who has asked for reduced motion.
+     * @default false
+     */
+    autoPlay?: boolean;
+    /** How long each slide is held, in milliseconds. @default 5000 */
+    interval?: number;
+    /** The previous/next buttons. @default true */
+    arrows?: boolean;
+    /** The row of position dots under the frame. @default true */
+    indicators?: boolean;
+    /**
+     * The carousel's accessible name, and what the arrows and the dots are called.
+     * Never drawn.
+     * @default 'Carousel'
+     */
+    label?: string;
+    /** @default 'Previous slide' */
+    previousLabel?: string;
+    /** @default 'Next slide' */
+    nextLabel?: string;
+    /**
+     * How one slide is named to a screen reader, and how its dot is labelled.
+     * @default (index, count) => `Slide ${index} of ${count}`
+     */
+    slideLabel?: (index: number, count: number) => string;
+    /** The slides. Every top-level child becomes one. */
+    children?: React.ReactNode;
+}
+/**
+ * A strip of slides, one of which is in view.
+ *
+ * The mechanism is a scroll container with CSS scroll snapping, and everything
+ * good about this component follows from that one choice. Swiping on a phone
+ * and two-finger dragging on a trackpad both work because they are the
+ * browser's own scrolling and not a gesture handler pretending to be it. The
+ * strip runs the other way under RTL without being told, because scrolling is
+ * directional and `translate` is not. And nothing is transformed — the house
+ * rule against moving a surface holds here for free, where a translated track
+ * would have had to argue for an exception.
+ *
+ * The motion is `scroll-behavior: smooth`, which means a reader who has asked
+ * for reduced motion gets an instant cut from the same code path rather than
+ * from a second one written to remember them.
+ *
+ * Slides are not a sub-component. Every top-level child is wrapped in its own
+ * slide, so `<PlCarousel><img /><img /></PlCarousel>` is the whole API — and the
+ * wrapper is what carries the snap point, the width and the
+ * `role="group"` / `aria-roledescription="slide"` pair a screen reader needs,
+ * none of which a caller should have to remember to put on a photograph.
+ */
+export declare const PlCarousel: React.ForwardRefExoticComponent<PlCarouselProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/carousel/PlCarousel.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{PlIconButton as a}from"../icon-button/PlIconButton.js";import{ChevronIcon as n}from"../../internal/icons.js";import{cx as s,radiusClasses as l,sheetRestClasses as i,srOnlyClasses as o,surfaceSlots as c,transitionClasses as u}from"../../internal/styles.js";const d={xs:"start-1 end-1",sm:"start-1.5 end-1.5",md:"start-2 end-2",lg:"start-3 end-3",xl:"start-4 end-4"},f={xs:{rest:"h-1 w-1",current:"h-1 w-3",gap:"gap-1"},sm:{rest:"h-1 w-1",current:"h-1 w-3.5",gap:"gap-1"},md:{rest:"h-1.5 w-1.5",current:"h-1.5 w-4",gap:"gap-1.5"},lg:{rest:"h-1.5 w-1.5",current:"h-1.5 w-5",gap:"gap-2"},xl:{rest:"h-2 w-2",current:"h-2 w-6",gap:"gap-2"}};export const PlCarousel=/* @__PURE__ */t.forwardRef(function PlCarousel({variant:m="glass",size:p="md",color:h="primary",density:v="default",elevation:b=0,value:w,defaultValue:g=0,onValueChange:x,loop:N=!0,autoPlay:y=!1,interval:k=5e3,arrows:C=!0,indicators:M=!0,label:j="Carousel",previousLabel:P="Previous slide",nextLabel:R="Next slide",slideLabel:I,className:L,style:S,children:$,..._},z){const E=I??((e,r)=>`Slide ${e} of ${r}`),V=t.Children.toArray($),B=V.length,[T,W]=t.useState(g),A=Math.min(Math.max(w??T,0),Math.max(B-1,0)),F=t.useRef(null),q=t.useRef([]),D=t.useRef(!1),G=t.useRef(!1),H=t.useRef(!1),[J,K]=t.useState(!1),O=t.useCallback((e,r=!1)=>{if(0===B)return;const t=N?(e%B+B)%B:Math.min(Math.max(e,0),B-1);D.current=r,void 0===w&&W(t),t!==A&&x?.(t)},[B,N,w,A,x]);t.useEffect(()=>{if(D.current)return void(D.current=!1);if(!G.current)return void(G.current=!0);q.current[A]?.scrollIntoView({block:"nearest",inline:"start"}),H.current=!0;const e=window.setTimeout(()=>{H.current=!1},700);return()=>window.clearTimeout(e)},[A]),t.useEffect(()=>{if(!y||J||B<2)return;if(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)return;const e=window.setInterval(()=>{document.hidden||O(A+1)},k);return()=>window.clearInterval(e)},[y,J,B,k,A,O]);const Q=A<=0,U=A>=B-1;return r("div",{ref:z,role:"region","aria-roledescription":"carousel","aria-label":j,className:s("flex flex-col",L),style:{...c(h,b),...S},onPointerEnter:()=>K(!0),onPointerLeave:()=>K(!1),onFocus:()=>K(!0),onBlur:()=>K(!1),..._,children:[r("div",{className:s("relative min-w-0 overflow-hidden",l[p],i[m],u),children:[e("div",{ref:F,tabIndex:0,role:"group","aria-label":j,className:s("flex min-w-0 snap-x snap-mandatory overflow-x-auto scroll-smooth","motion-reduce:scroll-auto","[scrollbar-width:none] [&::-webkit-scrollbar]:hidden","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]"),onScroll:()=>{const e=F.current;if(H.current||!e||0===e.clientWidth)return;const r=Math.round(Math.abs(e.scrollLeft)/e.clientWidth);r!==A&&r>=0&&r<B&&O(r,!0)},children:V.map((r,t)=>e("div",{ref:e=>{q.current[t]=e},role:"group","aria-roledescription":"slide","aria-label":E(t+1,B),className:"w-full shrink-0 grow-0 basis-full snap-start",children:r},t))}),C&&B>1?r("div",{className:s("pointer-events-none absolute inset-y-0 flex items-center",d[p]),children:[e(a,{variant:"glass",size:p,color:h,density:v,elevation:1,label:P,disabled:!N&&Q,className:"pointer-events-auto",icon:e("span",{className:"flex rotate-90 items-center rtl:-rotate-90",children:e(n,{})}),onClick:()=>O(A-1)}),e("span",{className:"flex-1"}),e(a,{variant:"glass",size:p,color:h,density:v,elevation:1,label:R,disabled:!N&&U,className:"pointer-events-auto",icon:e("span",{className:"flex -rotate-90 items-center rtl:rotate-90",children:e(n,{})}),onClick:()=>O(A+1)})]}):null]}),M&&B>1?e("div",{className:s("flex shrink-0 items-center justify-center pt-2",f[p].gap),children:V.map((r,t)=>e("button",{type:"button","aria-label":E(t+1,B),"aria-current":t===A?"true":void 0,className:s("cursor-pointer rounded-full","[transition-property:width,background-color]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-2",t===A?`${f[p].current} bg-(--p-accent)`:`${f[p].rest} bg-(--plass-border) hover:bg-(--p-accent)`),onClick:()=>O(t)},t))}):null,e("span",{className:o,"aria-live":y?"off":"polite",children:B>0?E(A+1,B):""})]})});

package/dist/components/carousel/index.d.ts

@@ -0,0 +1,2 @@
+export { PlCarousel } from './PlCarousel.js';
+export type { PlCarouselProps } from './PlCarousel.js';

package/dist/components/carousel/index.js

@@ -0,0 +1 @@
+export{PlCarousel}from"./PlCarousel.js";