pure-uikit 1.0.7 → 1.1.1

package/cdn/chunks/chunk.2425FH4L.js

@@ -0,0 +1,21 @@
+import {
+  PRelativeTime
+} from "./chunk.ZZAZHPYT.js";
+
+// src/react/relative-time/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "p-relative-time";
+PRelativeTime.define("p-relative-time");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: PRelativeTime,
+  react: React,
+  events: {},
+  displayName: "PRelativeTime"
+});
+var relative_time_default = reactWrapper;
+
+export {
+  relative_time_default
+};

package/cdn/chunks/chunk.24CP7RLQ.js

@@ -0,0 +1,27 @@
+import {
+  i
+} from "./chunk.YOCEZMWG.js";
+
+// src/components/menu-label/menu-label.styles.ts
+var menu_label_styles_default = i`
+  :host {
+    display: block;
+  }
+
+  .menu-label {
+    display: inline-block;
+    font-family: var(--p-font-sans);
+    font-size: var(--p-font-size-small);
+    font-weight: var(--p-font-weight-medium);
+    line-height: var(--p-line-height-normal);
+    letter-spacing: var(--p-letter-spacing-normal);
+    color: var(--p-color-neutral-500);
+    padding: var(--p-spacing-2x-small) var(--p-spacing-x-large);
+    user-select: none;
+    -webkit-user-select: none;
+  }
+`;
+
+export {
+  menu_label_styles_default
+};

package/cdn/chunks/chunk.24SLL2QT.js

@@ -0,0 +1,26 @@
+import {
+  PRadioGroup
+} from "./chunk.BWSUHJH5.js";
+
+// src/react/radio-group/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "p-radio-group";
+PRadioGroup.define("p-radio-group");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: PRadioGroup,
+  react: React,
+  events: {
+    onPChange: "p-change",
+    onPInput: "p-input",
+    onPInvalid: "p-invalid"
+  },
+  displayName: "PRadioGroup"
+});
+var radio_group_default = reactWrapper;
+
+export {
+  radio_group_default
+};

package/cdn/chunks/chunk.24UNRKKC.js

@@ -0,0 +1,127 @@
+import {
+  i
+} from "./chunk.YOCEZMWG.js";
+
+// src/components/dialog/dialog.styles.ts
+var dialog_styles_default = i`
+  :host {
+    --width: 31rem;
+    --header-spacing: var(--p-spacing-large);
+    --body-spacing: var(--p-spacing-large);
+    --footer-spacing: var(--p-spacing-large);
+
+    display: contents;
+  }
+
+  .dialog {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: var(--p-z-index-dialog);
+  }
+
+  .dialog__panel {
+    display: flex;
+    flex-direction: column;
+    z-index: 2;
+    width: var(--width);
+    max-width: calc(100% - var(--p-spacing-2x-large));
+    max-height: calc(100% - var(--p-spacing-2x-large));
+    background-color: var(--p-panel-background-color);
+    border-radius: var(--p-border-radius-large);
+    box-shadow: var(--p-shadow-x-large);
+  }
+
+  .dialog__panel:focus {
+    outline: none;
+  }
+
+  /* Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone) */
+  @media screen and (max-width: 420px) {
+    .dialog__panel {
+      max-height: 80vh;
+    }
+  }
+
+  .dialog--open .dialog__panel {
+    display: flex;
+    opacity: 1;
+  }
+
+  .dialog__header {
+    flex: 0 0 auto;
+    display: flex;
+  }
+
+  .dialog__title {
+    flex: 1 1 auto;
+    font: inherit;
+    font-size: var(--p-font-size-large);
+    line-height: var(--p-line-height-dense);
+    padding: var(--header-spacing);
+    margin: 0;
+  }
+
+  .dialog__header-actions {
+    flex-shrink: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: end;
+    gap: var(--p-spacing-2x-small);
+    padding: 0 var(--header-spacing);
+  }
+
+  .dialog__header-actions p-icon-button,
+  .dialog__header-actions ::slotted(p-icon-button) {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    font-size: var(--p-font-size-medium);
+  }
+
+  .dialog__body {
+    flex: 1 1 auto;
+    display: block;
+    padding: var(--body-spacing);
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .dialog__footer {
+    flex: 0 0 auto;
+    text-align: right;
+    padding: var(--footer-spacing);
+  }
+
+  .dialog__footer ::slotted(p-button:not(:first-of-type)) {
+    margin-inline-start: var(--p-spacing-x-small);
+  }
+
+  .dialog:not(.dialog--has-footer) .dialog__footer {
+    display: none;
+  }
+
+  .dialog__overlay {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: var(--p-overlay-background-color);
+  }
+
+  @media (forced-colors: active) {
+    .dialog__panel {
+      border: solid 1px var(--p-color-neutral-0);
+    }
+  }
+`;
+
+export {
+  dialog_styles_default
+};

package/cdn/chunks/chunk.2FGN24KG.js

@@ -0,0 +1,30 @@
+import {
+  i
+} from "./chunk.YOCEZMWG.js";
+
+// src/components/carousel-item/carousel-item.styles.ts
+var carousel_item_styles_default = i`
+  :host {
+    --aspect-ratio: inherit;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    width: 100%;
+    max-height: 100%;
+    aspect-ratio: var(--aspect-ratio);
+    scroll-snap-align: start;
+    scroll-snap-stop: always;
+  }
+
+  ::slotted(img) {
+    width: 100% !important;
+    height: 100% !important;
+    object-fit: cover;
+  }
+`;
+
+export {
+  carousel_item_styles_default
+};

package/cdn/chunks/chunk.2FHPKJBP.js

@@ -0,0 +1,345 @@
+import {
+  i
+} from "./chunk.YOCEZMWG.js";
+
+// src/components/color-picker/color-picker.styles.ts
+var color_picker_styles_default = i`
+  :host {
+    --grid-width: 280px;
+    --grid-height: 200px;
+    --grid-handle-size: 16px;
+    --slider-height: 15px;
+    --slider-handle-size: 17px;
+    --swatch-size: 25px;
+
+    display: inline-block;
+  }
+
+  .color-picker {
+    width: var(--grid-width);
+    font-family: var(--p-font-sans);
+    font-size: var(--p-font-size-medium);
+    font-weight: var(--p-font-weight-normal);
+    color: var(--color);
+    background-color: var(--p-panel-background-color);
+    border-radius: var(--p-border-radius-medium);
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .color-picker--inline {
+    border: solid var(--p-panel-border-width) var(--p-panel-border-color);
+  }
+
+  .color-picker--inline:focus-visible {
+    outline: var(--p-focus-ring);
+    outline-offset: var(--p-focus-ring-offset);
+  }
+
+  .color-picker__grid {
+    position: relative;
+    height: var(--grid-height);
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%),
+      linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
+    border-top-left-radius: var(--p-border-radius-medium);
+    border-top-right-radius: var(--p-border-radius-medium);
+    cursor: crosshair;
+    forced-color-adjust: none;
+  }
+
+  .color-picker__grid-handle {
+    position: absolute;
+    width: var(--grid-handle-size);
+    height: var(--grid-handle-size);
+    border-radius: 50%;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
+    border: solid 2px white;
+    margin-top: calc(var(--grid-handle-size) / -2);
+    margin-left: calc(var(--grid-handle-size) / -2);
+    transition: var(--p-transition-fast) scale;
+  }
+
+  .color-picker__grid-handle--dragging {
+    cursor: none;
+    scale: 1.5;
+  }
+
+  .color-picker__grid-handle:focus-visible {
+    outline: var(--p-focus-ring);
+  }
+
+  .color-picker__controls {
+    padding: var(--p-spacing-small);
+    display: flex;
+    align-items: center;
+  }
+
+  .color-picker__sliders {
+    flex: 1 1 auto;
+  }
+
+  .color-picker__slider {
+    position: relative;
+    height: var(--slider-height);
+    border-radius: var(--p-border-radius-pill);
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+    forced-color-adjust: none;
+  }
+
+  .color-picker__slider:not(:last-of-type) {
+    margin-bottom: var(--p-spacing-small);
+  }
+
+  .color-picker__slider-handle {
+    position: absolute;
+    top: calc(50% - var(--slider-handle-size) / 2);
+    width: var(--slider-handle-size);
+    height: var(--slider-handle-size);
+    background-color: white;
+    border-radius: 50%;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
+    margin-left: calc(var(--slider-handle-size) / -2);
+  }
+
+  .color-picker__slider-handle:focus-visible {
+    outline: var(--p-focus-ring);
+  }
+
+  .color-picker__hue {
+    background-image: linear-gradient(
+      to right,
+      rgb(255, 0, 0) 0%,
+      rgb(255, 255, 0) 17%,
+      rgb(0, 255, 0) 33%,
+      rgb(0, 255, 255) 50%,
+      rgb(0, 0, 255) 67%,
+      rgb(255, 0, 255) 83%,
+      rgb(255, 0, 0) 100%
+    );
+  }
+
+  .color-picker__alpha .color-picker__alpha-gradient {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+  }
+
+  .color-picker__preview {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: 2.25rem;
+    height: 2.25rem;
+    border: none;
+    border-radius: var(--p-border-radius-circle);
+    background: none;
+    margin-left: var(--p-spacing-small);
+    cursor: copy;
+    forced-color-adjust: none;
+  }
+
+  .color-picker__preview:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+
+    /* We use a custom property in lieu of currentColor because of https://bugs.webkit.org/show_bug.cgi?id=216780 */
+    background-color: var(--preview-color);
+  }
+
+  .color-picker__preview:focus-visible {
+    outline: var(--p-focus-ring);
+    outline-offset: var(--p-focus-ring-offset);
+  }
+
+  .color-picker__preview-color {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: solid 1px rgba(0, 0, 0, 0.125);
+  }
+
+  .color-picker__preview-color--copied {
+    animation: pulse 0.75s;
+  }
+
+  @keyframes pulse {
+    0% {
+      box-shadow: 0 0 0 0 var(--p-color-primary-500);
+    }
+    70% {
+      box-shadow: 0 0 0 0.5rem transparent;
+    }
+    100% {
+      box-shadow: 0 0 0 0 transparent;
+    }
+  }
+
+  .color-picker__user-input {
+    display: flex;
+    padding: 0 var(--p-spacing-small) var(--p-spacing-small) var(--p-spacing-small);
+  }
+
+  .color-picker__user-input p-input {
+    min-width: 0; /* fix input width in Safari */
+    flex: 1 1 auto;
+  }
+
+  .color-picker__user-input p-button-group {
+    margin-left: var(--p-spacing-small);
+  }
+
+  .color-picker__user-input p-button {
+    min-width: 3.25rem;
+    max-width: 3.25rem;
+    font-size: 1rem;
+  }
+
+  .color-picker__swatches {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    grid-gap: 0.5rem;
+    justify-items: center;
+    border-top: solid 1px var(--p-color-neutral-200);
+    padding: var(--p-spacing-small);
+    forced-color-adjust: none;
+  }
+
+  .color-picker__swatch {
+    position: relative;
+    width: var(--swatch-size);
+    height: var(--swatch-size);
+    border-radius: var(--p-border-radius-large);
+  }
+
+  .color-picker__swatch .color-picker__swatch-color {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: solid 1px rgba(0, 0, 0, 0.125);
+    border-radius: inherit;
+    cursor: pointer;
+  }
+
+  .color-picker__swatch:focus-visible {
+    outline: var(--p-focus-ring);
+    outline-offset: var(--p-focus-ring-offset);
+  }
+
+  .color-picker__transparent-bg {
+    background-image: linear-gradient(45deg, var(--p-color-neutral-300) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, var(--p-color-neutral-300) 75%),
+      linear-gradient(45deg, transparent 75%, var(--p-color-neutral-300) 75%),
+      linear-gradient(45deg, var(--p-color-neutral-300) 25%, transparent 25%);
+    background-size: 10px 10px;
+    background-position:
+      0 0,
+      0 0,
+      -5px -5px,
+      5px 5px;
+  }
+
+  .color-picker--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .color-picker--disabled .color-picker__grid,
+  .color-picker--disabled .color-picker__grid-handle,
+  .color-picker--disabled .color-picker__slider,
+  .color-picker--disabled .color-picker__slider-handle,
+  .color-picker--disabled .color-picker__preview,
+  .color-picker--disabled .color-picker__swatch,
+  .color-picker--disabled .color-picker__swatch-color {
+    pointer-events: none;
+  }
+
+  /*
+   * Color dropdown
+   */
+
+  .color-dropdown::part(panel) {
+    max-height: none;
+    background-color: var(--p-panel-background-color);
+    border: solid var(--p-panel-border-width) var(--p-panel-border-color);
+    border-radius: var(--p-border-radius-medium);
+    overflow: visible;
+  }
+
+  .color-dropdown__trigger {
+    display: inline-block;
+    position: relative;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    forced-color-adjust: none;
+  }
+
+  .color-dropdown__trigger.color-dropdown__trigger--small {
+    width: var(--p-input-height-small);
+    height: var(--p-input-height-small);
+    border-radius: var(--p-border-radius-circle);
+  }
+
+  .color-dropdown__trigger.color-dropdown__trigger--medium {
+    width: var(--p-input-height-medium);
+    height: var(--p-input-height-medium);
+    border-radius: var(--p-border-radius-circle);
+  }
+
+  .color-dropdown__trigger.color-dropdown__trigger--large {
+    width: var(--p-input-height-large);
+    height: var(--p-input-height-large);
+    border-radius: var(--p-border-radius-circle);
+  }
+
+  .color-dropdown__trigger:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    background-color: currentColor;
+    box-shadow:
+      inset 0 0 0 2px var(--p-input-border-color),
+      inset 0 0 0 4px var(--p-color-neutral-0);
+  }
+
+  .color-dropdown__trigger--empty:before {
+    background-color: transparent;
+  }
+
+  .color-dropdown__trigger:focus-visible {
+    outline: none;
+  }
+
+  .color-dropdown__trigger:focus-visible:not(.color-dropdown__trigger--disabled) {
+    outline: var(--p-focus-ring);
+    outline-offset: var(--p-focus-ring-offset);
+  }
+
+  .color-dropdown__trigger.color-dropdown__trigger--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+
+export {
+  color_picker_styles_default
+};

package/cdn/chunks/chunk.2GTFU4XE.js

@@ -0,0 +1,24 @@
+import {
+  PImageComparer
+} from "./chunk.YITO6PGZ.js";
+
+// src/react/image-comparer/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "p-image-comparer";
+PImageComparer.define("p-image-comparer");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: PImageComparer,
+  react: React,
+  events: {
+    onPChange: "p-change"
+  },
+  displayName: "PImageComparer"
+});
+var image_comparer_default = reactWrapper;
+
+export {
+  image_comparer_default
+};

package/cdn/chunks/chunk.2GWWE34T.js

@@ -0,0 +1,11 @@
+import {
+  PButton
+} from "./chunk.4AACIW4K.js";
+
+// src/components/button/button.ts
+var button_default = PButton;
+PButton.define("p-button");
+
+export {
+  button_default
+};

package/cdn/chunks/chunk.2ITYJTPR.js

@@ -0,0 +1,50 @@
+import {
+  LocalizeController
+} from "./chunk.6BMNUR6W.js";
+import {
+  PureElement,
+  n
+} from "./chunk.I7DGGRXW.js";
+import {
+  __decorateClass
+} from "./chunk.KIILAQWQ.js";
+
+// src/components/format-bytes/format-bytes.component.ts
+var PFormatBytes = class extends PureElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.value = 0;
+    this.unit = "byte";
+    this.display = "short";
+  }
+  render() {
+    if (isNaN(this.value)) {
+      return "";
+    }
+    const bitPrefixes = ["", "kilo", "mega", "giga", "tera"];
+    const bytePrefixes = ["", "kilo", "mega", "giga", "tera", "peta"];
+    const prefix = this.unit === "bit" ? bitPrefixes : bytePrefixes;
+    const index = Math.max(0, Math.min(Math.floor(Math.log10(this.value) / 3), prefix.length - 1));
+    const unit = prefix[index] + this.unit;
+    const valueToFormat = parseFloat((this.value / Math.pow(1e3, index)).toPrecision(3));
+    return this.localize.number(valueToFormat, {
+      style: "unit",
+      unit,
+      unitDisplay: this.display
+    });
+  }
+};
+__decorateClass([
+  n({ type: Number })
+], PFormatBytes.prototype, "value", 2);
+__decorateClass([
+  n()
+], PFormatBytes.prototype, "unit", 2);
+__decorateClass([
+  n()
+], PFormatBytes.prototype, "display", 2);
+
+export {
+  PFormatBytes
+};