@pitchfork-ui/elements 0.0.0-stage → 0.1.0

package/dist/collection/components/pf-calendar/pf-calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-calendar.js","sourceRoot":"","sources":["../../../src/components/pf-calendar/pf-calendar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  addMonths,\n  buildCalendarDays,\n  CALENDAR_CELL_COUNT,\n  clampMonthToYearRange,\n  formatISODate,\n  isOutsideDateRange,\n  isSameDay,\n  Keys,\n  moveCalendarDate,\n  parseISODate,\n  resolveCalendarKey,\n  startOfMonth,\n  toMidday,\n  WEEKDAY_LABELS,\n  type CalendarMove,\n} from '@pitchfork-ui/core';\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\n/**\n * A month grid for picking a date.\n *\n * **It has a keyboard, which the React component does not.** `Calendar`\n * renders 42 buttons and no key handling, so reaching the end of a month means\n * 42 presses of Tab and there is no way to move by week at all. This grid is\n * the ARIA pattern instead: one tab stop, arrows to move a day, up and down a\n * week, Home and End to the ends of the week, PageUp/PageDown a month. The\n * arithmetic is core's `moveCalendarDate`, so the React component can adopt it\n * without the two disagreeing — recorded in `todo.md`.\n *\n * Month and year are native `<select>`s rather than two `pf-dropdown`s. A year\n * range of a century would mean a hundred custom elements rendered into this\n * shadow root for one control, and a `<select>` brings its own keyboard and\n * its platform picker on a phone.\n *\n * @part calendar - the root box.\n * @part header - the month and year controls row.\n * @part grid - the month grid.\n * @part day - every day cell.\n * @part selected - the selected day.\n * @part today - today's cell.\n */\n@Component({\n  tag: 'pf-calendar',\n  styleUrl: 'pf-calendar.css',\n  shadow: true,\n})\nexport class PfCalendar {\n  @Element() el!: HTMLElement;\n\n  /** The selected date, as `YYYY-MM-DD`. Reflected, so a selector can find it. */\n  @Prop({ mutable: true, reflect: true }) value?: string;\n\n  /** Earliest selectable date, as `YYYY-MM-DD`. */\n  @Prop() min?: string;\n\n  /** Latest selectable date, as `YYYY-MM-DD`. */\n  @Prop() max?: string;\n\n  /** First year offered in the year picker. Defaults to 50 years back. */\n  @Prop() startYear?: number;\n\n  /** Last year offered in the year picker. Defaults to 50 years on. */\n  @Prop() endYear?: number;\n\n  /** Render the days borrowed from the neighbouring months. */\n  @Prop() showOutsideDays = true;\n\n  /** Accessible name for the grid. */\n  @Prop() label = 'Calendar';\n\n  /**\n   * A predicate for days that cannot be chosen, beyond `min` and `max`.\n   *\n   * A property rather than an attribute, because a function cannot be written\n   * in HTML — the generated bindings set props as properties, so a React or\n   * Angular consumer passes it as they would any other prop, and a plain-HTML\n   * consumer uses `min`/`max` or assigns it in script.\n   */\n  @Prop() isDateDisabled?: (date: Date) => boolean;\n\n  /** Fires with the chosen date, as `YYYY-MM-DD`. */\n  @Event() pfChange!: EventEmitter<{ value: string }>;\n\n  /** The month on screen. */\n  @State() displayMonth: Date = startOfMonth(new Date());\n\n  /** The day the grid's single tab stop sits on. */\n  @State() focusedDate: Date = toMidday(new Date());\n\n  /** Set once a key or a click has moved focus, so the first paint does not steal it. */\n  private shouldRestoreFocus = false;\n\n  componentWillLoad() {\n    const selected = this.selectedDate();\n    const base = selected ?? toMidday(new Date());\n    this.focusedDate = base;\n    this.displayMonth = this.clamp(startOfMonth(base));\n  }\n\n  componentDidRender() {\n    if (!this.shouldRestoreFocus) return;\n    this.shouldRestoreFocus = false;\n    // The grid has one tab stop, so after a move the new one has to be given\n    // focus explicitly — the old button may not even exist any more.\n    this.el.shadowRoot?.querySelector<HTMLButtonElement>('button[data-day][tabindex=\"0\"]')?.focus();\n  }\n\n  /** Follows a value set from outside, so the grid shows what it is told. */\n  @Watch('value')\n  syncValue() {\n    const selected = this.selectedDate();\n    if (!selected) return;\n    this.focusedDate = selected;\n    this.displayMonth = this.clamp(startOfMonth(selected));\n  }\n\n  /** Moves the grid to the month holding `date` (a `Date` or `YYYY-MM-DD`). */\n  @Method()\n  async goToMonth(date: string | Date): Promise<void> {\n    const target = typeof date === 'string' ? parseISODate(date) : toMidday(date);\n    if (!target) return;\n    this.displayMonth = this.clamp(startOfMonth(target));\n    this.focusedDate = target;\n  }\n\n  /**\n   * Puts focus on the grid's single tab stop.\n   *\n   * A method rather than something a container does for itself: the tab stop\n   * is inside this shadow root, and reaching into another component's shadow\n   * root to find it is exactly the coupling `::part()` and `@Method()` exist\n   * to avoid. `pf-date-picker` calls this when its popover opens.\n   */\n  @Method()\n  async focusSelectedDay(): Promise<void> {\n    this.el.shadowRoot?.querySelector<HTMLButtonElement>('button[data-day][tabindex=\"0\"]')?.focus();\n  }\n\n  private selectedDate(): Date | null {\n    return parseISODate(this.value);\n  }\n\n  private get years() {\n    const now = new Date().getFullYear();\n    const start = this.startYear ?? now - 50;\n    const end = this.endYear ?? now + 50;\n    return { start: Math.min(start, end), end: Math.max(start, end) };\n  }\n\n  private clamp(date: Date): Date {\n    const { start, end } = this.years;\n    return clampMonthToYearRange(date, start, end);\n  }\n\n  private isDisabled(date: Date): boolean {\n    const min = parseISODate(this.min);\n    const max = parseISODate(this.max);\n    if (isOutsideDateRange(date, min, max)) return true;\n    return this.isDateDisabled?.(date) ?? false;\n  }\n\n  private select(date: Date) {\n    if (this.isDisabled(date)) return;\n    this.value = formatISODate(date);\n    this.focusedDate = date;\n    this.displayMonth = this.clamp(startOfMonth(date));\n    this.pfChange.emit({ value: this.value });\n  }\n\n  /**\n   * Moves the focused day, bringing the grid with it.\n   *\n   * A disabled day can still be focused — skipping it would make a long\n   * blocked stretch impossible to cross, and the ARIA pattern is that focus\n   * moves freely while activation is refused.\n   */\n  private moveFocus(move: CalendarMove) {\n    const next = moveCalendarDate(this.focusedDate, move);\n    const { start, end } = this.years;\n    if (next.getFullYear() < start || next.getFullYear() > end) return;\n\n    this.focusedDate = next;\n    this.displayMonth = this.clamp(startOfMonth(next));\n    this.shouldRestoreFocus = true;\n  }\n\n  private onKeyDown = (event: KeyboardEvent) => {\n    // The key map is core's, so the React `Calendar` cannot disagree with this\n    // grid about what PageUp means.\n    const move = resolveCalendarKey(event.key);\n    if (move) {\n      event.preventDefault();\n      this.moveFocus(move);\n      return;\n    }\n\n    if (event.key === Keys.Enter || event.key === Keys.Space) {\n      event.preventDefault();\n      this.select(this.focusedDate);\n      this.shouldRestoreFocus = true;\n    }\n  };\n\n  /**\n   * Shows a month and brings the tab stop with it.\n   *\n   * Both halves, always. Moving `displayMonth` alone leaves `focusedDate` on a\n   * day that is no longer rendered, so no cell carries `tabindex=\"0\"` and the\n   * grid drops out of the tab order altogether — reachable by mouse and by\n   * nothing else. The year picker did exactly that until a test went looking.\n   */\n  private showMonth(month: Date) {\n    const target = this.clamp(startOfMonth(month));\n    const lastDay = new Date(target.getFullYear(), target.getMonth() + 1, 0, 12).getDate();\n    this.displayMonth = target;\n    this.focusedDate = new Date(\n      target.getFullYear(),\n      target.getMonth(),\n      Math.min(this.focusedDate.getDate(), lastDay),\n      12,\n    );\n  }\n\n  private stepMonth(amount: number) {\n    this.showMonth(addMonths(this.displayMonth, amount));\n  }\n\n  private renderHeader() {\n    const { start, end } = this.years;\n    const years = Array.from({ length: end - start + 1 }, (_, index) => start + index);\n    const months = Array.from({ length: 12 }, (_, month) =>\n      new Intl.DateTimeFormat('en-US', { month: 'long' }).format(new Date(2024, month, 1)),\n    );\n\n    const atFirst = this.displayMonth.getFullYear() === start && this.displayMonth.getMonth() === 0;\n    const atLast = this.displayMonth.getFullYear() === end && this.displayMonth.getMonth() === 11;\n\n    return (\n      <div class=\"header\" part=\"header\">\n        <button\n          type=\"button\"\n          class=\"nav\"\n          aria-label=\"Previous month\"\n          disabled={atFirst}\n          onClick={() => this.stepMonth(-1)}\n        >\n          <pf-icon name=\"square-caret-left\"></pf-icon>\n        </button>\n\n        <div class=\"controls\">\n          <select\n            class=\"select\"\n            aria-label=\"Month\"\n            onChange={(event) => {\n              const month = Number((event.target as HTMLSelectElement).value);\n              this.showMonth(new Date(this.displayMonth.getFullYear(), month, 1, 12));\n            }}\n          >\n            {months.map((name, month) => (\n              <option\n                key={name}\n                value={String(month)}\n                selected={month === this.displayMonth.getMonth()}\n              >\n                {name}\n              </option>\n            ))}\n          </select>\n\n          <select\n            class=\"select\"\n            aria-label=\"Year\"\n            onChange={(event) => {\n              const year = Number((event.target as HTMLSelectElement).value);\n              this.showMonth(new Date(year, this.displayMonth.getMonth(), 1, 12));\n            }}\n          >\n            {years.map((year) => (\n              <option\n                key={year}\n                value={String(year)}\n                selected={year === this.displayMonth.getFullYear()}\n              >\n                {year}\n              </option>\n            ))}\n          </select>\n        </div>\n\n        <button\n          type=\"button\"\n          class=\"nav\"\n          aria-label=\"Next month\"\n          disabled={atLast}\n          onClick={() => this.stepMonth(1)}\n        >\n          <pf-icon name=\"square-caret-right\"></pf-icon>\n        </button>\n      </div>\n    );\n  }\n\n  render() {\n    const days = buildCalendarDays(this.displayMonth);\n    const selected = this.selectedDate();\n    const today = toMidday(new Date());\n    const monthLabel = new Intl.DateTimeFormat('en-US', {\n      month: 'long',\n      year: 'numeric',\n    }).format(this.displayMonth);\n\n    return (\n      <Host>\n        <div class=\"calendar\" part=\"calendar\">\n          {this.renderHeader()}\n\n          <div\n            class=\"grid\"\n            part=\"grid\"\n            role=\"grid\"\n            aria-label={`${this.label}, ${monthLabel}`}\n            onKeyDown={this.onKeyDown}\n          >\n            <div class=\"row\" role=\"row\">\n              {WEEKDAY_LABELS.map((day) => (\n                <span key={day} class=\"weekday\" role=\"columnheader\" aria-label={day}>\n                  {day}\n                </span>\n              ))}\n            </div>\n\n            {Array.from({ length: CALENDAR_CELL_COUNT / 7 }, (_, week) => (\n              <div key={week} class=\"row\" role=\"row\">\n                {days.slice(week * 7, week * 7 + 7).map(({ date, inCurrentMonth }) => {\n                  if (!this.showOutsideDays && !inCurrentMonth) {\n                    return <span key={formatISODate(date)} class=\"empty\" role=\"gridcell\"></span>;\n                  }\n\n                  const isSelected = selected ? isSameDay(selected, date) : false;\n                  const isToday = isSameDay(today, date);\n                  const isFocused = isSameDay(this.focusedDate, date);\n                  const disabled = this.isDisabled(date);\n\n                  return (\n                    <button\n                      key={formatISODate(date)}\n                      type=\"button\"\n                      role=\"gridcell\"\n                      data-day={formatISODate(date)}\n                      part={`day${isSelected ? ' selected' : ''}${isToday ? ' today' : ''}`}\n                      class={{\n                        day: true,\n                        'day--outside': !inCurrentMonth,\n                        'day--today': isToday,\n                        'day--selected': isSelected,\n                      }}\n                      /* One tab stop for the whole grid: the arrows do the rest. */\n                      tabindex={isFocused ? 0 : -1}\n                      aria-selected={isSelected ? 'true' : 'false'}\n                      aria-current={isToday ? 'date' : null}\n                      aria-disabled={disabled ? 'true' : null}\n                      aria-label={new Intl.DateTimeFormat('en-US', {\n                        weekday: 'long',\n                        month: 'long',\n                        day: 'numeric',\n                        year: 'numeric',\n                      }).format(date)}\n                      onClick={() => {\n                        this.select(date);\n                        this.shouldRestoreFocus = true;\n                      }}\n                    >\n                      {date.getDate()}\n                    </button>\n                  );\n                })}\n              </div>\n            ))}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pf-card/pf-card.css

@@ -0,0 +1,17 @@
+/*
+ * The host is the card. `overflow: hidden` is what makes a section's own
+ * border-bottom stop at the rounded corner instead of crossing it, so the
+ * sections need no corner-radius rules of their own.
+ */
+:host {
+  background: var(--pf-card-background);
+  border: 1px solid var(--pf-card-border);
+  border-radius: var(--pf-card-radius, var(--radius-lg));
+  box-shadow: var(--pf-card-shadow, var(--shadow-sm));
+  display: block;
+  overflow: hidden;
+}
+
+:host([hidden]) {
+  display: none;
+}

package/dist/collection/components/pf-card/pf-card.js

@@ -0,0 +1,32 @@
+import { h, Host } from "@stencil/core";
+/**
+ * A surface that groups related content.
+ *
+ * The React library's `Card` / `CardHeader` / `CardContent` / `CardFooter` map
+ * to four elements rather than to one element with named slots. Named slots
+ * would need a slot controller to know whether to render each wrapper at all —
+ * an unslotted `header` would otherwise leave a padded, bordered empty strip.
+ * Separate elements have no such state: the consumer writing
+ * `<pf-card-header>` *is* the signal.
+ *
+ * @slot - the card's sections, usually `pf-card-header`, `pf-card-content` and
+ * `pf-card-footer`, though any content is allowed.
+ */
+export class PfCard {
+    render() {
+        return (h(Host, { key: 'dde68be01e7fc8e7773cf3b21153e2502f115df2' }, h("slot", { key: '30bd9de2b4eaf837b40afa6161f18a823c78d683' })));
+    }
+    static get is() { return "pf-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-card.css"]
+        };
+    }
+}
+//# sourceMappingURL=pf-card.js.map

package/dist/collection/components/pf-card/pf-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-card.js","sourceRoot":"","sources":["../../../src/components/pf-card/pf-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;;;;;;GAYG;AAMH,MAAM,OAAO,MAAM;IACjB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n/**\n * A surface that groups related content.\n *\n * The React library's `Card` / `CardHeader` / `CardContent` / `CardFooter` map\n * to four elements rather than to one element with named slots. Named slots\n * would need a slot controller to know whether to render each wrapper at all —\n * an unslotted `header` would otherwise leave a padded, bordered empty strip.\n * Separate elements have no such state: the consumer writing\n * `<pf-card-header>` *is* the signal.\n *\n * @slot - the card's sections, usually `pf-card-header`, `pf-card-content` and\n * `pf-card-footer`, though any content is allowed.\n */\n@Component({\n  tag: 'pf-card',\n  styleUrl: 'pf-card.css',\n  shadow: true,\n})\nexport class PfCard {\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pf-card-content/pf-card-content.css

@@ -0,0 +1,8 @@
+:host {
+  display: block;
+  padding: var(--pf-card-section-padding, var(--space-4));
+}
+
+:host([hidden]) {
+  display: none;
+}

package/dist/collection/components/pf-card-content/pf-card-content.js

@@ -0,0 +1,24 @@
+import { h, Host } from "@stencil/core";
+/**
+ * The body section of a `pf-card`.
+ *
+ * @slot - the content.
+ */
+export class PfCardContent {
+    render() {
+        return (h(Host, { key: '59a59b62c908361de72c2a887083eaf0e4cd8990' }, h("slot", { key: '666c791fcd20f18eb92e1d7cbdf688db3a9f46e9' })));
+    }
+    static get is() { return "pf-card-content"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-card-content.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-card-content.css"]
+        };
+    }
+}
+//# sourceMappingURL=pf-card-content.js.map

package/dist/collection/components/pf-card-content/pf-card-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-card-content.js","sourceRoot":"","sources":["../../../src/components/pf-card-content/pf-card-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;GAIG;AAMH,MAAM,OAAO,aAAa;IACxB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n/**\n * The body section of a `pf-card`.\n *\n * @slot - the content.\n */\n@Component({\n  tag: 'pf-card-content',\n  styleUrl: 'pf-card-content.css',\n  shadow: true,\n})\nexport class PfCardContent {\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pf-card-footer/pf-card-footer.css

@@ -0,0 +1,10 @@
+:host {
+  border-top: 1px solid var(--pf-card-border);
+  display: flex;
+  gap: var(--pf-card-footer-gap);
+  padding: var(--pf-card-section-padding, var(--space-4));
+}
+
+:host([hidden]) {
+  display: none;
+}

package/dist/collection/components/pf-card-footer/pf-card-footer.js

@@ -0,0 +1,26 @@
+import { h, Host } from "@stencil/core";
+/**
+ * The bottom section of a `pf-card`, separated from what precedes it by a rule.
+ * Lays its children out in a row, which is what makes it the natural home for
+ * a card's actions.
+ *
+ * @slot - the footer's content, usually buttons.
+ */
+export class PfCardFooter {
+    render() {
+        return (h(Host, { key: '94597fc7d75217bd21d063cb79f4e99dc4d4962b' }, h("slot", { key: '6d37ed88a893134c4b4025ed4870993b9ea82812' })));
+    }
+    static get is() { return "pf-card-footer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-card-footer.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-card-footer.css"]
+        };
+    }
+}
+//# sourceMappingURL=pf-card-footer.js.map

package/dist/collection/components/pf-card-footer/pf-card-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-card-footer.js","sourceRoot":"","sources":["../../../src/components/pf-card-footer/pf-card-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;GAMG;AAMH,MAAM,OAAO,YAAY;IACvB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n/**\n * The bottom section of a `pf-card`, separated from what precedes it by a rule.\n * Lays its children out in a row, which is what makes it the natural home for\n * a card's actions.\n *\n * @slot - the footer's content, usually buttons.\n */\n@Component({\n  tag: 'pf-card-footer',\n  styleUrl: 'pf-card-footer.css',\n  shadow: true,\n})\nexport class PfCardFooter {\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pf-card-header/pf-card-header.css

@@ -0,0 +1,14 @@
+/*
+ * Reads pf-card's own variables rather than defining its own: a consumer who
+ * sets --pf-card-section-padding on a card expects every section to follow,
+ * and custom properties inherit through the shadow boundary.
+ */
+:host {
+  border-bottom: 1px solid var(--pf-card-border);
+  display: block;
+  padding: var(--pf-card-section-padding, var(--space-4));
+}
+
+:host([hidden]) {
+  display: none;
+}

package/dist/collection/components/pf-card-header/pf-card-header.js

@@ -0,0 +1,24 @@
+import { h, Host } from "@stencil/core";
+/**
+ * The top section of a `pf-card`, separated from what follows by a rule.
+ *
+ * @slot - the header's content.
+ */
+export class PfCardHeader {
+    render() {
+        return (h(Host, { key: '334c522bf5347bac313ff6fb75e1b21018911828' }, h("slot", { key: 'a69f1d5579125f7c71344fe5b92391a99dcf7066' })));
+    }
+    static get is() { return "pf-card-header"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-card-header.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-card-header.css"]
+        };
+    }
+}
+//# sourceMappingURL=pf-card-header.js.map

package/dist/collection/components/pf-card-header/pf-card-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-card-header.js","sourceRoot":"","sources":["../../../src/components/pf-card-header/pf-card-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;GAIG;AAMH,MAAM,OAAO,YAAY;IACvB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n/**\n * The top section of a `pf-card`, separated from what follows by a rule.\n *\n * @slot - the header's content.\n */\n@Component({\n  tag: 'pf-card-header',\n  styleUrl: 'pf-card-header.css',\n  shadow: true,\n})\nexport class PfCardHeader {\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pf-carousel/pf-carousel.css

@@ -0,0 +1,145 @@
+:host {
+  background: var(--pf-carousel-bg);
+  border: 1px solid var(--pf-carousel-border);
+  border-radius: var(--pf-carousel-radius, var(--radius-md));
+  display: grid;
+  gap: var(--pf-carousel-gap, var(--space-3));
+  overflow: hidden;
+  padding: var(--pf-carousel-padding, var(--space-3));
+  width: 100%;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.viewport {
+  background: var(--pf-carousel-viewport-bg);
+  border-radius: var(--pf-carousel-viewport-radius, var(--radius-sm));
+  overflow: hidden;
+  width: 100%;
+}
+
+.track {
+  display: flex;
+  transition: transform var(--pf-carousel-transition-duration, var(--duration-moderate))
+    var(--easing-decelerate);
+  width: 100%;
+}
+
+/*
+ * The track stays in the tree with no slides in it — a slot that is not
+ * rendered never fires `slotchange` — and is simply not laid out. Two classes
+ * deep, because the track sets its own `display` above.
+ */
+.track.empty {
+  display: none;
+}
+
+.empty {
+  align-items: center;
+  color: var(--pf-carousel-empty-text);
+  display: flex;
+  font-size: var(--pf-carousel-empty-font-size, var(--font-size-sm));
+  justify-content: center;
+  min-height: var(--pf-carousel-empty-min-height, 180px);
+  padding: var(--pf-carousel-empty-padding, var(--space-4));
+  text-align: center;
+}
+
+/*
+ * Each element needs its own copy: `.pf-sr-only` is declared once in the React
+ * library's global sheet and does not cross a shadow boundary.
+ */
+.sr-only {
+  border: 0;
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.controls {
+  align-items: center;
+  display: grid;
+  gap: var(--pf-carousel-controls-gap, var(--space-2));
+  grid-template-columns:
+    var(--pf-carousel-nav-size, 28px) 1fr
+    var(--pf-carousel-nav-size, 28px);
+}
+
+.nav {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--pf-carousel-nav-radius, var(--radius-sm));
+  color: var(--pf-carousel-nav-text);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: var(--pf-carousel-nav-font-size, var(--font-size-sm));
+  height: var(--pf-carousel-nav-size, 28px);
+  justify-content: center;
+  padding: 0;
+  width: var(--pf-carousel-nav-size, 28px);
+}
+
+.nav:hover:not(:disabled) {
+  background: var(--pf-carousel-nav-hover-bg);
+  color: var(--pf-carousel-nav-hover-text);
+}
+
+.nav:focus-visible {
+  box-shadow: var(--pf-carousel-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.nav:disabled {
+  color: var(--pf-carousel-nav-text);
+  cursor: not-allowed;
+  opacity: var(--pf-carousel-disabled-opacity, 0.45);
+}
+
+.indicators {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--pf-carousel-indicator-gap, var(--space-1));
+  justify-content: center;
+}
+
+.indicator {
+  background: var(--pf-carousel-indicator-bg);
+  border: 0;
+  border-radius: var(--pf-carousel-indicator-radius, var(--radius-full));
+  cursor: pointer;
+  height: var(--pf-carousel-indicator-size, 8px);
+  padding: 0;
+  transition: all var(--pf-carousel-indicator-transition-duration, var(--duration-fast))
+    var(--easing-decelerate);
+  width: var(--pf-carousel-indicator-size, 8px);
+}
+
+.indicator--active {
+  background: var(--pf-carousel-indicator-active-bg);
+  width: var(--pf-carousel-indicator-active-width, 20px);
+}
+
+.indicator:focus-visible {
+  box-shadow: var(--pf-carousel-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.indicator-spacer {
+  display: block;
+  min-height: var(--pf-carousel-indicator-size, 8px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .track,
+  .indicator {
+    transition: none;
+  }
+}