pure-uikit 1.0.8 → 1.1.2

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

@@ -0,0 +1,11 @@
+import {
+  PAnimatedImage
+} from "./chunk.QG2QETCP.js";
+
+// src/components/animated-image/animated-image.ts
+var animated_image_default = PAnimatedImage;
+PAnimatedImage.define("p-animated-image");
+
+export {
+  animated_image_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.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.254EFQVD.js

@@ -0,0 +1,21 @@
+import {
+  PBadge
+} from "./chunk.B4CD35RC.js";
+
+// src/react/badge/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "p-badge";
+PBadge.define("p-badge");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: PBadge,
+  react: React,
+  events: {},
+  displayName: "PBadge"
+});
+var badge_default = reactWrapper;
+
+export {
+  badge_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
+};