@pine-ds/core 5.0.0-mercury.0 → 5.0.0

package/dist/collection/components/pds-image/stories/pds-image.stories.js

@@ -1,17 +1,17 @@
 import { html } from 'lit';
-import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
 
 export default {
-  argTypes: extractArgTypes('pds-image'),
   component: 'pds-image',
   title: 'components/Image'
 }
 
 const BaseTemplate = (args) => html` <pds-image
   alt="${args.alt}"
+  fit="${args.fit}"
   height="${args.height}"
   component-id="${args.componentId}"
-  loading="${args.loading}"
+  ?loading=${args.loading}
+  ratio="${args.ratio}"
   sizes="${args.sizes}"
   src="${args.src}"
   srcset="${args.srcset}"
@@ -20,16 +20,132 @@ const BaseTemplate = (args) => html` <pds-image
 
 const SizesAndSrcsetTemplate = (args) => html`<pds-image alt="${args.alt}" sizes="${args.sizes}" src="${args.src}" srcset="${args.srcset}" />`;
 
+const RatioTemplate = (args) => html`<div style="width: 320px">
+  <pds-image alt="${args.alt}" fit="${args.fit}" ratio="${args.ratio}" src="${args.src}" />
+</div>`;
+
+// The source is portrait while every shape below is not, so each one shows what
+// the component does with the overflow.
+const FitTemplate = (args) => html`<div style="display: flex; gap: 1rem;">
+  ${['cover', 'contain', 'fill'].map(
+    (fit) => html`<figure style="margin: 0; width: 160px;">
+      <pds-image alt="${args.alt}" fit="${fit}" ratio="${args.ratio}" src="${args.src}"></pds-image>
+      <figcaption><code>fit="${fit}"</code></figcaption>
+    </figure>`,
+  )}
+</div>`;
+
+// Each frame covers its image with a placeholder until `pdsImageLoad` removes it, or shows
+// an error message on `pdsImageError`. The placeholder sits over the image rather than
+// hiding it, since a hidden image with `loading="lazy"` never loads. The loading placeholder
+// is hidden from screen readers, which already announce the image's alt. The error message's
+// `role="status"` region stays rendered the whole time, faded out by opacity rather than
+// `hidden`, so only its text changes when the error arrives — a region that goes from hidden
+// to visible with its text already set often isn't announced.
+const showState = (event, state) => {
+  const frame = event.target.closest('[data-image-frame]');
+  const error = frame.querySelector('[data-image-error]');
+  frame.querySelector('[data-image-placeholder]').hidden = state !== 'loading';
+  error.style.opacity = state === 'error' ? '1' : '0';
+  error.querySelector('pds-text').textContent = state === 'error' ? "This image couldn't load" : '';
+};
+
+const overlayStyle = 'position: absolute; inset: 0;';
+
+const EventsTemplate = (args) => {
+  // Reloading changes `src`, which emits the events again for the new image.
+  const reload = (event) => {
+    event.target.closest('[data-image-events]').querySelectorAll('[data-image-frame]').forEach((frame) => {
+      const image = frame.querySelector('pds-image');
+      const url = new URL(image.getAttribute('src'), window.location.href);
+      url.searchParams.set('reload', Date.now());
+      frame.querySelector('[data-image-placeholder]').hidden = false;
+      frame.querySelector('[data-image-error]').style.opacity = '0';
+      frame.querySelector('[data-image-error] pds-text').textContent = '';
+      image.setAttribute('src', url.href);
+    });
+  };
+
+  return html`<pds-box data-image-events direction="column" gap="md">
+    <pds-box gap="md" wrap>
+      ${[
+        { label: 'Loads', src: args.src },
+        { label: 'Fails to load', src: args.brokenSrc },
+      ].map(
+        ({ label, src }) => html`<div data-image-frame style="width: 240px;">
+          <div style="position: relative;">
+            <pds-image
+              alt="${args.alt}"
+              ratio="landscape"
+              src="${src}"
+              @pdsImageLoad=${(event) => showState(event, 'loaded')}
+              @pdsImageError=${(event) => showState(event, 'error')}
+            ></pds-image>
+            <pds-box
+              data-image-placeholder
+              aria-hidden="true"
+              align-items="center"
+              background-color="var(--pine-color-background-muted)"
+              justify-content="center"
+              style="${overlayStyle}"
+            >
+              <pds-text color="secondary" size="sm">Loading image…</pds-text>
+            </pds-box>
+            <pds-box
+              data-image-error
+              role="status"
+              align-items="center"
+              background-color="var(--pine-color-background-inset)"
+              justify-content="center"
+              style="${overlayStyle} opacity: 0; pointer-events: none;"
+            >
+              <pds-text color="secondary" size="sm"></pds-text>
+            </pds-box>
+          </div>
+          <pds-text size="sm">${label}</pds-text>
+        </div>`,
+      )}
+    </pds-box>
+    <div>
+      <pds-button variant="secondary" @pdsClick=${reload}>Reload images</pds-button>
+    </div>
+  </pds-box>`;
+};
+
 export const Default = BaseTemplate.bind();
 Default.args = {
-  alt: 'Random Unsplash',
-  src: '//source.unsplash.com/320x180',
+  alt: 'Random Bear',
+  src: 'https://placebear.com/320/180',
+  height: '180',
+  width: '320'
 }
 
 export const SizesAndSrcset = SizesAndSrcsetTemplate.bind();
 SizesAndSrcset.args = {
-  alt: 'Random Unsplash',
+  alt: 'Random Bear',
   sizes: '(max-width: 450px) 150px, 600px',
-  src: '//source.unsplash.com/600x200',
-  srcset: '//source.unsplash.com/150x150 400w, //source.unsplash.com/600x200',
+  src: 'https://placebear.com/600/200',
+  srcset: 'https://placebear.com/150/50 150w, https://placebear.com/600/200 600w',
+}
+
+export const Ratio = RatioTemplate.bind();
+Ratio.args = {
+  alt: 'Random Bear',
+  fit: 'cover',
+  ratio: 'wide',
+  src: 'https://placebear.com/200/300',
+}
+
+export const Fit = FitTemplate.bind();
+Fit.args = {
+  alt: 'Random Bear',
+  ratio: 'wide',
+  src: 'https://placebear.com/200/300',
+}
+
+export const Events = EventsTemplate.bind();
+Events.args = {
+  alt: 'Random Bear',
+  brokenSrc: 'https://placebear.com/does-not-exist.png',
+  src: 'https://placebear.com/400/300',
 }

package/dist/collection/components/pds-input/input-interface.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/pds-input/pds-input.css

@@ -1,92 +1,304 @@
 :host {
-  --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);
-  --box-shadow-focus-error: 0 0 0 2px var(--pine-color-red-200);
-  --color-text-default: var(--pine-color-charcoal-500);
-  --color-background-disabled: var(--pine-color-grey-100);
-  --color-border-default: var(--pine-color-grey-400);
-  --color-border-error: var(--pine-color-red-300);
-  --color-border-hover: var(--pine-color-grey-500);
-  --color-disabled-text: var(--pine-color-grey-500);
-  --color-placeholder-text: var(--pine-color-charcoal-200);
-  --font-size-helper-message: var(--pine-font-size-100);
-  --font-size-input-field: var(--pine-font-size-100);
-  --font-size-label: var(--pine-font-size-100);
-  --font-weight-helper-message: var(--pine-font-weight-normal);
-  --font-weight-input-field: var(--pine-font-weight-normal);
-  --font-weight-label: var(--pine-font-weight-medium);
-  --line-height-label: var(--pine-line-height-150);
-  --line-height-helper-message: var(--pine-line-height-125);
-  --line-height-input-field: var(--pine-line-height-150);
-  --spacing-field-padding-block: var(--pine-spacing-100);
-  --spacing-input-field-padding-inline: var(--pine-spacing-200);
-  --spacing-label-margin-block-end: var(--pine-spacing-100);
-  --spacing-margin-top-helper-message: var(--pine-spacing-100);
+  --pds-input-background: var(--pine-color-background-container);
+  --pds-input-border-color: var(--pine-color-border);
+  --pds-input-border-color-hover: var(--pine-color-border-hover);
+  --pds-input-border-color-disabled: var(--pine-color-border-disabled);
+  --pds-input-border-radius: var(--pine-dimension-125);
+  --pds-input-border-width: var(--pine-border-width-thin);
+  --pds-input-padding-x: var(--pine-dimension-150);
+  --pds-input-padding-y: calc(var(--pine-dimension-xs) - var(--pine-border-width));
+  --pds-input-font: var(--pine-typography-body);
+  --pds-input-text-color: var(--pine-color-text-strong);
+  --pds-input-placeholder-color: var(--pine-color-text-placeholder);
+  --pds-input-icon-color: var(--pine-color-text-secondary);
+  --pds-input-disabled-background: var(--pine-color-background-container-disabled);
+  --pds-input-disabled-text-color: var(--pine-color-text-disabled);
+  --pds-input-error-color: var(--pine-color-text-message-danger);
+  --pds-input-error-background: var(--pine-input-color-background-danger);
+  --pds-input-error-border: var(--pine-color-border-danger);
+  --pds-input-error-border-hover: var(--pine-color-border-danger-hover);
+  --pds-input-addon-background: var(--pine-color-background-subtle);
+  --pds-input-addon-color: var(--pine-color-text-secondary);
+  --pds-input-field-min-height: var(--pine-dimension-450);
+  --box-shadow-focus: 0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring);
+  --box-shadow-focus-error: 0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring-danger);
   display: inline;
 }
+:host pds-select::part(select) {
+  background-color: var(--pds-input-error-background);
+  border-color: var(--pds-input-error-border);
+}
+:host::part(prefix), :host::part(suffix) {
+  align-items: center;
+  color: var(--pine-color-text-label-readonly);
+  display: flex;
+  height: 100%;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  white-space: nowrap;
+  z-index: calc(var(--pine-z-index-raised) - 1);
+}
+:host::part(prefix) {
+  border-end-start-radius: var(--pds-input-border-radius);
+  border-inline-end: var(--pine-border-width-none);
+  border-start-start-radius: var(--pds-input-border-radius);
+  inset-inline-start: var(--pds-input-padding-x);
+}
+:host::part(suffix) {
+  border-end-end-radius: var(--pds-input-border-radius);
+  border-inline-start: var(--pine-border-width-none);
+  border-start-end-radius: var(--pds-input-border-radius);
+  inset-inline-end: var(--pds-input-padding-x);
+}
+:host::part(prepend), :host::part(append) {
+  align-items: center;
+  background-color: var(--pds-input-addon-background);
+  border: var(--pds-input-border-width) solid var(--pds-input-border-color);
+  color: var(--pds-input-addon-color);
+  display: flex;
+  overflow: visible;
+}
+:host::part(prepend) {
+  border-end-start-radius: var(--pds-input-border-radius);
+  border-inline-end: var(--pine-border-width-none);
+  border-start-start-radius: var(--pds-input-border-radius);
+}
+:host::part(append) {
+  border-end-end-radius: var(--pds-input-border-radius);
+  border-inline-start: var(--pine-border-width-none);
+  border-start-end-radius: var(--pds-input-border-radius);
+}
+
+/* stylelint-disable-next-line */
+:host([has-prepend]) ::slotted(pds-button[slot=prepend]) {
+  --pds-button-background: var(--pds-input-addon-background);
+  --pds-button-border: var(--pine-border-width-none);
+  --pds-button-border-radius: var(--pine-dimension-none);
+  --pds-button-border-radius-end-end: var(--pine-dimension-none);
+  --pds-button-border-radius-start-end: var(--pine-dimension-none);
+  --pds-button-border-radius-start-start: var(--pds-input-border-radius);
+  --pds-button-border-radius-end-start: var(--pds-input-border-radius);
+  --pds-button-min-height: calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)));
+  --pds-button-box-shadow-focus: 0 0 0 3px var(--pine-color-focus-ring);
+  --pds-button-outline-focus: none;
+}
+
+/* stylelint-disable-next-line */
+:host([has-append]) ::slotted(pds-button[slot=append]) {
+  --pds-button-background: var(--pds-input-addon-background);
+  --pds-button-border: var(--pine-border-width-none);
+  --pds-button-border-radius: var(--pine-dimension-none);
+  --pds-button-border-radius-end-start: var(--pine-dimension-none);
+  --pds-button-border-radius-start-start: var(--pine-dimension-none);
+  --pds-button-border-radius-start-end: var(--pds-input-border-radius);
+  --pds-button-border-radius-end-end: var(--pds-input-border-radius);
+  --pds-button-min-height: calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)));
+  --pds-button-box-shadow-focus: 0 0 0 3px var(--pine-color-focus-ring);
+  --pds-button-outline-focus: none;
+}
+
+/* stylelint-disable-next-line */
+:host([has-prepend]) ::slotted(pds-select[slot=prepend]) {
+  --pds-select-background: var(--pds-input-addon-background);
+  --pds-select-border: var(--pine-border-width-none);
+  --pds-select-border-radius-end-end: var(--pine-dimension-none);
+  --pds-select-border-radius-end-start: var(--pds-input-border-radius);
+  --pds-select-border-radius-start-end: var(--pine-dimension-none);
+  --pds-select-border-radius-start-start: var(--pds-input-border-radius);
+  --pds-select-min-height: calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)));
+}
+
+/* stylelint-disable-next-line */
+:host([has-append]) ::slotted(pds-select[slot=append]) {
+  --pds-select-background: var(--pds-input-addon-background);
+  --pds-select-border: var(--pine-border-width-none);
+  --pds-select-border-radius-end-end: var(--pds-input-border-radius);
+  --pds-select-border-radius-end-start: var(--pine-dimension-none);
+  --pds-select-border-radius-start-end: var(--pds-input-border-radius);
+  --pds-select-border-radius-start-start: var(--pine-dimension-none);
+  --pds-select-min-height: calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)));
+}
+
+:host([aria-readonly=true]) input {
+  background-color: var(--pine-color-background-container-disabled);
+  color: var(--pine-color-text-readonly);
+}
+
+:host([aria-disabled=true])::part(prepend), :host([aria-disabled=true])::part(append) {
+  background-color: var(--pds-input-disabled-background);
+  border: var(--pds-input-border-width) solid var(--pds-input-border-color-disabled);
+}
+
+:host([full-width=true]) {
+  width: 100%;
+}
+
+:host([invalid=true])::part(prepend), :host([invalid=true])::part(append) {
+  background-color: var(--pds-input-error-background);
+  border: var(--pds-input-border-width) solid var(--pds-input-error-border);
+}
+
+:host([highlight]:not([disabled]):not([aria-disabled=true]):not([invalid]):not([aria-readonly=true])) {
+  --pds-input-background: var(--pine-color-accent-disabled);
+  --pds-input-border-color: var(--pine-color-accent);
+  --pds-input-border-color-hover: var(--pine-color-accent-hover);
+  --pds-input-text-color: var(--pine-color-text-accent);
+}
+:host([highlight]:not([disabled]):not([aria-disabled=true]):not([invalid]):not([aria-readonly=true]))::part(prefix), :host([highlight]:not([disabled]):not([aria-disabled=true]):not([invalid]):not([aria-readonly=true]))::part(suffix) {
+  color: var(--pine-color-text-accent);
+}
+:host([highlight]:not([disabled]):not([aria-disabled=true]):not([invalid]):not([aria-readonly=true])) .pds-input__field:focus-visible {
+  outline-color: var(--pine-color-focus-ring);
+}
 
 .pds-input {
   display: flex;
   flex-direction: column;
 }
 
-label {
-  font-size: var(--font-size-label);
-  font-weight: var(--font-weight-label);
-  line-height: var(--line-height-label);
-  margin-block-end: var(--spacing-label-margin-block-end);
+.pds-input__label-wrapper {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin-block-end: var(--pine-dimension-2xs);
+}
+
+.pds-input__label {
+  color: var(--pine-color-text-strong);
+  margin-block-end: var(--pine-dimension-2xs);
+}
+
+.pds-input__label-wrapper .pds-input__label {
+  margin-block-end: 0;
+}
+
+.pds-input__action {
+  align-items: center;
+  display: flex;
+  gap: var(--pine-dimension-xs);
+  margin-inline-start: var(--pine-dimension-xs);
 }
 
-input {
-  border: 1px solid var(--color-border-default);
-  border-radius: 10px;
-  font-size: var(--font-size-input-field);
-  font-weight: var(--font-weight-input-field);
-  line-height: var(--line-height-input-field);
-  padding: var(--spacing-field-padding-block) var(--spacing-input-field-padding-inline);
-  /* stylelint-disable */
-  /* stylelint-enable */
+.pds-input__field-wrapper {
+  align-items: center;
+  display: flex;
+  position: relative;
+  width: 100%;
+}
+.pds-input__field-wrapper.has-prefix .pds-input__field {
+  padding-inline-start: calc(2 * var(--pds-input-padding-x) + var(--prefix-width, 1em));
+}
+.pds-input__field-wrapper.has-suffix .pds-input__field {
+  padding-inline-end: calc(2 * var(--pds-input-padding-x) + var(--suffix-width, 1em));
+}
+.pds-input__field-wrapper.has-prepend .pds-input__field {
+  border-end-start-radius: var(--pine-dimension-none);
+  border-start-start-radius: var(--pine-dimension-none);
 }
-input:disabled {
-  background-color: var(--color-background-disabled);
-  color: var(--color-disabled-text);
+.pds-input__field-wrapper.has-append .pds-input__field {
+  border-end-end-radius: var(--pine-dimension-none);
+  border-start-end-radius: var(--pine-dimension-none);
+}
+
+.pds-input__field {
+  background: var(--pds-input-background);
+  border: var(--pds-input-border-width) solid var(--pds-input-border-color);
+  border-radius: var(--pds-input-border-radius);
+  box-sizing: border-box;
+  color: var(--pds-input-text-color);
+  flex: 1;
+  font: var(--pds-input-font);
+  letter-spacing: var(--pine-letter-spacing);
+  min-height: var(--pds-input-field-min-height);
+  min-width: var(--pine-dimension-none);
+  padding: var(--pds-input-padding-y) var(--pds-input-padding-x);
+  transition: border-color var(--pine-motion-duration-base) ease;
+  width: 100%;
+}
+.pds-input__field:hover:not(:disabled) {
+  border-color: var(--pds-input-border-color-hover);
+}
+.pds-input__field:disabled {
+  background: var(--pds-input-disabled-background);
+  border-color: var(--pine-color-border-disabled);
+  color: var(--pds-input-disabled-text-color);
   cursor: not-allowed;
 }
-input:hover {
-  border-color: var(--color-border-hover);
+.pds-input__field:disabled::placeholder {
+  color: var(--pine-color-text-placeholder-disabled);
 }
-input:focus-visible {
-  box-shadow: var(--box-shadow-focus);
-  outline: none;
+.has-error .pds-input__field:hover:not(:disabled) {
+  border-color: var(--pds-input-error-border-hover);
 }
-input::-webkit-input-placeholder {
-  color: var(--color-placeholder-text);
+:host-context([data-theme=dark]) .has-error .pds-input__field:hover:not(:disabled) {
+  border-color: var(--pine-color-red-950);
 }
-input::-moz-placeholder {
-  color: var(--color-placeholder-text);
+.pds-input__field:focus-visible:not(.has-error) {
+  border-color: var(--pine-color-border-active);
+  outline: var(--pine-outline-focus);
+  outline-offset: var(--pine-border-width);
+  position: relative;
+  z-index: 1;
 }
-input::-moz-placeholder {
-  color: var(--color-placeholder-text);
+:host([has-prepend]) .pds-input__field:focus-visible:not(.has-error), :host([has-append]) .pds-input__field:focus-visible:not(.has-error), :host([has-prefix]) .pds-input__field:focus-visible:not(.has-error), :host([has-suffix]) .pds-input__field:focus-visible:not(.has-error) {
+  outline-offset: var(--pine-dimension-none);
 }
-input:-ms-input-placeholder {
-  color: var(--color-placeholder-text);
+.pds-input__field::placeholder {
+  color: var(--pds-input-placeholder-color);
 }
-input:has(~ .pds-input__error-message) {
-  border-color: var(--color-border-error);
+.pds-input__field:placeholder-shown {
+  text-overflow: ellipsis;
 }
-input:has(~ .pds-input__error-message):focus-visible {
-  box-shadow: var(--box-shadow-focus-error);
-  outline: none;
+.has-error .pds-input__field {
+  background-color: var(--pds-input-error-background);
+  border-color: var(--pds-input-error-border);
+}
+:host-context([data-theme=dark]) .has-error .pds-input__field {
+  background-color: var(--pine-color-red-950);
+}
+.has-error .pds-input__field:focus-visible {
+  outline-color: var(--pine-color-focus-ring-danger);
+  position: relative;
+  z-index: 1;
 }
 
 .pds-input__error-message,
 .pds-input__helper-message {
-  font-size: var(--font-size-helper-message);
-  font-weight: var(--font-weight-helper-message);
-  line-height: var(--line-height-helper-message);
-  margin-block-end: 0;
-  margin-block-start: var(--spacing-margin-top-helper-message);
+  color: var(--pine-color-text-message);
+  font: var(--pine-typography-body-sm-medium);
+  margin-block-end: var(--pine-dimension-none);
+  margin-block-start: var(--pine-dimension-2xs);
 }
 
 .pds-input__error-message {
-  color: var(--color-error);
+  color: var(--pds-input-error-color);
+  display: flex;
+  gap: var(--pine-dimension-2xs);
+}
+.pds-input__error-message pds-icon {
+  margin-block-start: var(--pine-dimension-025);
+}
+
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: polygon(0 0, 0 0, 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.pds-input__field::-webkit-search-cancel-button {
+  appearance: none;
+  background-color: var(--pds-input-placeholder-color);
+  cursor: pointer;
+  height: var(--pine-dimension-sm);
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.646 3.646a.5.5 0 0 1 .708 0L8 7.293l3.646-3.647a.5.5 0 0 1 .708.708L8.707 8l3.647 3.646a.5.5 0 0 1-.708.708L8 8.707l-3.646 3.647a.5.5 0 0 1-.708-.708L7.293 8 3.646 4.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
+  mask-size: contain;
+  width: var(--pine-dimension-sm);
 }