@pitchfork-ui/elements 0.0.0-stage → 0.2.1

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

@@ -0,0 +1,200 @@
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.notification {
+  align-items: flex-start;
+  background: var(--pf-notification-bg);
+  border: 1px solid var(--pf-notification-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--pf-notification-elevation-floating-shadow, var(--pf-elevation-floating-shadow));
+  color: var(--pf-notification-text);
+  display: grid;
+  gap: var(--space-3);
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  padding: var(--space-3);
+  width: 100%;
+  animation: pf-notification-in var(--pf-transition-enter);
+}
+
+@media (min-width: 768px) {
+  .notification {
+    padding: var(--space-4);
+  }
+}
+
+/*
+ * Its own copies: @keyframes do not cross a shadow boundary, so the global
+ * sheet's `pf-notification-in` is invisible from in here.
+ */
+@keyframes pf-notification-in {
+  from {
+    opacity: 0;
+    transform: translateX(12px);
+  }
+}
+
+/* Slides out and collapses, so the stack above closes the gap behind it. */
+:host([exiting]) .notification {
+  animation: pf-notification-out var(--duration-moderate) var(--easing-accelerate) forwards;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+@keyframes pf-notification-out {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+    max-height: 480px;
+  }
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+    max-height: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .notification,
+  :host([exiting]) .notification {
+    animation: none;
+  }
+}
+
+:host([variant='info']) .notification {
+  background: color-mix(
+    in srgb,
+    var(--pf-notification-info-bg) 45%,
+    var(--pf-notification-mix-base)
+  );
+  border-color: var(--pf-notification-info-border);
+}
+
+:host([variant='success']) .notification {
+  background: color-mix(
+    in srgb,
+    var(--pf-notification-success-bg) 45%,
+    var(--pf-notification-mix-base)
+  );
+  border-color: var(--pf-notification-success-border);
+}
+
+:host([variant='warning']) .notification {
+  background: color-mix(
+    in srgb,
+    var(--pf-notification-warning-bg) 45%,
+    var(--pf-notification-mix-base)
+  );
+  border-color: var(--pf-notification-warning-border);
+}
+
+:host([variant='danger']) .notification {
+  background: color-mix(
+    in srgb,
+    var(--pf-notification-danger-bg) 45%,
+    var(--pf-notification-mix-base)
+  );
+  border-color: var(--pf-notification-danger-border);
+}
+
+.icon {
+  align-items: center;
+  display: inline-flex;
+  font-size: var(--font-size-lg);
+  height: 1em;
+  justify-content: center;
+  line-height: 1;
+  margin-top: 2px;
+  width: 1em;
+}
+
+:host([variant='info']) .icon {
+  color: var(--pf-notification-info-icon);
+}
+
+:host([variant='success']) .icon {
+  color: var(--pf-notification-success-icon);
+}
+
+:host([variant='warning']) .icon {
+  color: var(--pf-notification-warning-icon);
+}
+
+:host([variant='danger']) .icon {
+  color: var(--pf-notification-danger-icon);
+}
+
+.content {
+  display: grid;
+  gap: var(--space-1);
+  min-width: 0;
+}
+
+.title {
+  color: var(--pf-notification-text);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.35;
+  margin: 0;
+}
+
+:host([variant='info']) .title {
+  color: var(--pf-notification-info-title);
+}
+
+.body {
+  color: var(--pf-notification-text-muted);
+  font-size: var(--font-size-sm);
+  line-height: 1.45;
+}
+
+:host([variant='info']) .body {
+  color: var(--pf-notification-info-icon);
+}
+
+.body[hidden] {
+  display: none;
+}
+
+slot[name='action']::slotted(*) {
+  margin-top: var(--space-2);
+}
+
+.dismiss {
+  align-items: center;
+  align-self: flex-start;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--pf-notification-text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  height: 28px;
+  justify-content: center;
+  width: 28px;
+}
+
+:host([variant='info']) .dismiss {
+  color: var(--pf-notification-info-icon);
+}
+
+.dismiss:hover,
+.dismiss:focus-visible {
+  background: var(--pf-notification-bg-subtle);
+  color: var(--pf-notification-text);
+  outline: none;
+}
+
+:host([variant='info']) .dismiss:hover,
+:host([variant='info']) .dismiss:focus-visible {
+  background: var(--pf-notification-info-hover-bg);
+  color: var(--pf-notification-info-hover-icon);
+}

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

@@ -0,0 +1,234 @@
+import { animationsFinished, liveRegionRole, severityIconName, } from "@pitchfork-ui/core";
+import { h, Host, } from "@stencil/core";
+/**
+ * A notification: an icon, a heading, a body and an optional dismiss button.
+ *
+ * The role comes from core's `liveRegionRole`, so `warning` and `danger`
+ * announce assertively and `info` and `success` wait their turn. The React
+ * component used to be `role="status"` for all four — the rule lived in
+ * `Alert` and nowhere else — which is why the mapping is now shared.
+ *
+ * @slot - the body, used instead of the `description` prop when present.
+ * @slot icon - replaces the icon the variant would choose.
+ * @slot action - buttons or links under the body.
+ * @part notification - the root box.
+ * @part icon - the icon's box.
+ * @part title - the heading.
+ * @part body - the description's box.
+ * @part dismiss - the dismiss button.
+ */
+export class PfNotification {
+    el;
+    /** Severity. Reflected, because the stylesheet selects on it. */
+    variant = 'info';
+    /** The bold first line. */
+    heading;
+    /** The body, when nothing is slotted. */
+    description;
+    /** Render the dismiss button. */
+    dismissable = false;
+    /** Set while the exit animation plays. Reflected for the stylesheet. */
+    exiting = false;
+    /**
+     * Fires once the notification has finished leaving, which is the point at
+     * which its owner should remove it from the DOM.
+     */
+    pfDismiss;
+    hasSlottedBody = false;
+    componentWillLoad() {
+        this.readBody();
+    }
+    /**
+     * Starts the exit animation and resolves when it has finished, having
+     * emitted `pfDismiss`. Calling it twice is harmless.
+     */
+    async dismiss() {
+        if (this.exiting)
+            return;
+        this.exiting = true;
+        await this.waitForExit();
+        this.pfDismiss.emit();
+    }
+    /**
+     * Waits for the exit animation, or returns straight away when there is not
+     * one. Core's, so `pf-alert` and the React `useExitAnimation` wait the same
+     * way — and none of them waits on a guessed duration.
+     */
+    async waitForExit() {
+        await animationsFinished(this.el.shadowRoot?.querySelector('.notification'));
+    }
+    readBody() {
+        this.hasSlottedBody = Array.from(this.el.childNodes).some((node) => node.nodeType === Node.ELEMENT_NODE
+            ? !node.getAttribute('slot')
+            : Boolean(node.textContent?.trim()));
+    }
+    render() {
+        return (h(Host, { key: '9de454e456c98762a879e0f1e108a0a8367dbc2e' }, h("div", { key: '60b5e41a64035032f4a3096c0d2fee0ede545753', class: "notification", part: "notification", role: liveRegionRole(this.variant) }, h("span", { key: '3294482f4cc196ed29b5378664eb4724f0d41dc2', class: "icon", part: "icon", "aria-hidden": "true" }, h("slot", { key: '1c2d8970cbd0b7a4e90dc10ec60fa3d9160c690a', name: "icon" }, h("pf-icon", { key: '83470033a1b36b3c0fd44db1e6dc0eb14d2d7b6d', name: severityIconName(this.variant) }))), h("div", { key: '61f69fbe020dfc1be756e50d1eec26e78a74c117', class: "content" }, this.heading && (h("p", { key: '99cb65b4ea18b954a5297d3179cb0e0fa1289f1b', class: "title", part: "title" }, this.heading)), h("div", { key: 'da4e2ff62296f30097110b136f08e0fe48f196ee', class: "body", part: "body", hidden: !this.hasSlottedBody && !this.description }, h("slot", { key: '745fd458de689740eba54922790b2826a59abec7', onSlotchange: () => this.readBody() }, this.description)), h("slot", { key: 'af0385dd7accef3853fb861bd796592ecb0abd25', name: "action" })), this.dismissable && (h("button", { key: 'ef0abf4e61771983746f9fc8e1ae1cb89e54fd0c', class: "dismiss", part: "dismiss", type: "button", "aria-label": "Dismiss notification", onClick: () => this.dismiss() }, h("svg", { key: '5b9685008b5afc7443bc7cbc05d5cc85f8673875', viewBox: "0 0 16 16", width: "16", height: "16", "aria-hidden": "true", focusable: "false" }, h("path", { key: 'afb4ecdec4e8cdfc5f6060e7a63b330f87d409a6', d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", "stroke-width": "1.6", "stroke-linecap": "round", fill: "none" })))))));
+    }
+    static get is() { return "pf-notification"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-notification.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-notification.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PfNotificationVariant",
+                    "resolved": "\"danger\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {
+                        "PfNotificationVariant": {
+                            "location": "local",
+                            "path": "/home/runner/work/pitchfork-ui/pitchfork-ui/packages/elements/src/components/pf-notification/pf-notification.tsx",
+                            "id": "src/components/pf-notification/pf-notification.tsx::PfNotificationVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Severity. Reflected, because the stylesheet selects on it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'info'"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The bold first line."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The body, when nothing is slotted."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "dismissable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Render the dismiss button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "dismissable",
+                "defaultValue": "false"
+            },
+            "exiting": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set while the exit animation plays. Reflected for the stylesheet."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "exiting",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasSlottedBody": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pfDismiss",
+                "name": "pfDismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires once the notification has finished leaving, which is the point at\nwhich its owner should remove it from the DOM."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "dismiss": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Starts the exit animation and resolves when it has finished, having\nemitted `pfDismiss`. Calling it twice is harmless.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=pf-notification.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-notification.js","sourceRoot":"","sources":["../../../src/components/pf-notification/pf-notification.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  animationsFinished,\n  liveRegionRole,\n  severityIconName,\n  type LiveRegionVariant,\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} from '@stencil/core';\n\nexport type PfNotificationVariant = LiveRegionVariant;\n\n/**\n * A notification: an icon, a heading, a body and an optional dismiss button.\n *\n * The role comes from core's `liveRegionRole`, so `warning` and `danger`\n * announce assertively and `info` and `success` wait their turn. The React\n * component used to be `role=\"status\"` for all four — the rule lived in\n * `Alert` and nowhere else — which is why the mapping is now shared.\n *\n * @slot - the body, used instead of the `description` prop when present.\n * @slot icon - replaces the icon the variant would choose.\n * @slot action - buttons or links under the body.\n * @part notification - the root box.\n * @part icon - the icon's box.\n * @part title - the heading.\n * @part body - the description's box.\n * @part dismiss - the dismiss button.\n */\n@Component({\n  tag: 'pf-notification',\n  styleUrl: 'pf-notification.css',\n  shadow: true,\n})\nexport class PfNotification {\n  @Element() el!: HTMLElement;\n\n  /** Severity. Reflected, because the stylesheet selects on it. */\n  @Prop({ reflect: true }) variant: PfNotificationVariant = 'info';\n\n  /** The bold first line. */\n  @Prop() heading?: string;\n\n  /** The body, when nothing is slotted. */\n  @Prop() description?: string;\n\n  /** Render the dismiss button. */\n  @Prop({ reflect: true }) dismissable = false;\n\n  /** Set while the exit animation plays. Reflected for the stylesheet. */\n  @Prop({ mutable: true, reflect: true }) exiting = false;\n\n  /**\n   * Fires once the notification has finished leaving, which is the point at\n   * which its owner should remove it from the DOM.\n   */\n  @Event() pfDismiss!: EventEmitter<void>;\n\n  @State() hasSlottedBody = false;\n\n  componentWillLoad() {\n    this.readBody();\n  }\n\n  /**\n   * Starts the exit animation and resolves when it has finished, having\n   * emitted `pfDismiss`. Calling it twice is harmless.\n   */\n  @Method()\n  async dismiss(): Promise<void> {\n    if (this.exiting) return;\n    this.exiting = true;\n    await this.waitForExit();\n    this.pfDismiss.emit();\n  }\n\n  /**\n   * Waits for the exit animation, or returns straight away when there is not\n   * one. Core's, so `pf-alert` and the React `useExitAnimation` wait the same\n   * way — and none of them waits on a guessed duration.\n   */\n  private async waitForExit(): Promise<void> {\n    await animationsFinished(this.el.shadowRoot?.querySelector('.notification'));\n  }\n\n  private readBody() {\n    this.hasSlottedBody = Array.from(this.el.childNodes).some((node) =>\n      node.nodeType === Node.ELEMENT_NODE\n        ? !(node as Element).getAttribute('slot')\n        : Boolean(node.textContent?.trim()),\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"notification\" part=\"notification\" role={liveRegionRole(this.variant)}>\n          <span class=\"icon\" part=\"icon\" aria-hidden=\"true\">\n            <slot name=\"icon\">\n              <pf-icon name={severityIconName(this.variant)}></pf-icon>\n            </slot>\n          </span>\n\n          <div class=\"content\">\n            {this.heading && (\n              <p class=\"title\" part=\"title\">\n                {this.heading}\n              </p>\n            )}\n\n            <div class=\"body\" part=\"body\" hidden={!this.hasSlottedBody && !this.description}>\n              <slot onSlotchange={() => this.readBody()}>{this.description}</slot>\n            </div>\n\n            <slot name=\"action\" />\n          </div>\n\n          {this.dismissable && (\n            <button\n              class=\"dismiss\"\n              part=\"dismiss\"\n              type=\"button\"\n              aria-label=\"Dismiss notification\"\n              onClick={() => this.dismiss()}\n            >\n              <svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" aria-hidden=\"true\" focusable=\"false\">\n                <path\n                  d=\"M4 4l8 8M12 4l-8 8\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.6\"\n                  stroke-linecap=\"round\"\n                  fill=\"none\"\n                />\n              </svg>\n            </button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pf-number-input/pf-number-input.css

@@ -0,0 +1,137 @@
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.field {
+  display: grid;
+  gap: var(--space-2);
+}
+
+.label {
+  color: var(--pf-numberinput-field-label, var(--pf-field-label));
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.required {
+  color: var(--pf-field-required);
+  margin-inline-start: var(--space-1);
+}
+
+.control {
+  align-items: stretch;
+  background: var(--pf-numberinput-bg);
+  border: 1px solid var(--pf-numberinput-border);
+  border-radius: var(--radius-md);
+  display: inline-flex;
+  min-height: 40px;
+  overflow: hidden;
+  transition:
+    border var(--pf-transition-fast),
+    box-shadow var(--pf-transition-fast);
+  width: 100%;
+}
+
+.control:focus-within {
+  border-color: var(--pf-numberinput-focus-border);
+  box-shadow: var(--pf-numberinput-focus-ring, var(--pf-focus-ring));
+}
+
+.control--invalid {
+  border-color: var(--pf-numberinput-invalid-border);
+}
+
+/*
+ * `:host([disabled])` rather than the React component's
+ * `:has(.input:disabled)`: the host carries the reflected attribute, which is
+ * both simpler and the thing a consumer's own stylesheet can see.
+ */
+:host([disabled]) .control {
+  background: var(--pf-control-bg-disabled);
+  border-color: var(--pf-control-border-disabled);
+  color: var(--pf-control-text-disabled);
+  opacity: 0.6;
+}
+
+.input {
+  background: transparent;
+  border: none;
+  color: var(--pf-numberinput-text);
+  flex: 1;
+  font: inherit;
+  min-width: 0;
+  outline: none;
+  padding: 0 var(--space-3);
+  text-align: center;
+  width: 100%;
+}
+
+.input::placeholder {
+  color: var(--pf-numberinput-placeholder);
+}
+
+.input:disabled {
+  cursor: not-allowed;
+}
+
+.step {
+  align-items: center;
+  align-self: stretch;
+  background: var(--pf-numberinput-step-bg);
+  border: none;
+  color: var(--pf-numberinput-step-text);
+  cursor: pointer;
+  display: inline-flex;
+  flex-shrink: 0;
+  justify-content: center;
+  padding: 0;
+  transition:
+    background var(--pf-transition-fast),
+    color var(--pf-transition-fast);
+  width: 40px;
+}
+
+.step:hover:not(:disabled) {
+  background: var(--pf-numberinput-step-hover-bg);
+  color: var(--pf-numberinput-step-hover-text);
+}
+
+.step:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+[part='decrement'] {
+  border-inline-end: 1px solid var(--pf-numberinput-border);
+}
+
+[part='increment'] {
+  border-inline-start: 1px solid var(--pf-numberinput-border);
+}
+
+.step pf-icon {
+  font-size: 16px;
+}
+
+.description {
+  color: var(--pf-numberinput-field-description, var(--pf-field-description));
+  font-size: var(--font-size-sm);
+  margin: 0;
+}
+
+.error {
+  color: var(--pf-field-error);
+  font-size: var(--font-size-sm);
+  margin: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .control,
+  .step {
+    transition: none;
+  }
+}