@pine-ds/core 4.0.0-mercury.0 → 4.1.0

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

@@ -1,79 +1,164 @@
 import { html } from 'lit';
-import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
-import { withActions } from '@storybook/addon-actions/decorator';
+
 
 export default {
-  argTypes: extractArgTypes('pds-chip'),
-  component: 'pds-chip',
-  decorators: [withActions],
-  parameters: {
-    actions: {
-      handles: ['onclick', 'pdsTagCloseClick'],
+  argTypes: {
+    sentiment: {
+      control: { type: 'select' },
+      options: ['accent', 'brand', 'danger', 'info', 'neutral', 'success', 'warning'],
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'],
+    },
+    variant: {
+      control: { type: 'select' },
+      options: ['text', 'tag', 'dropdown'],
     },
   },
+  component: 'pds-chip',
+  parameters: {},
   title: 'components/Chip'
 }
 
 const BaseTemplate = (args) => html`
 <pds-chip
   component-id="${args.componentId}"
-  dot="${args.dot}"
-  label="${args.label}"
-  large="${args.large}"
+  ?dot=${args.dot}
+  icon="${args.icon}"
+  size="${args.size}"
   sentiment="${args.sentiment}"
   variant="${args.variant}"
-/>`;
+  remove-url="${args.removeUrl}"
+  remove-http-method="${args.removeHttpMethod}"
+  remove-target="${args.removeTarget}"
+  max-width="${args.maxWidth}"
+>
+  ${args.slot}
+</pds-chip>`;
 
 export const Default = BaseTemplate.bind();
 Default.args = {
   dot: false,
-  label: "label",
-  large: false,
+  icon: "",
+  size: "md",
   sentiment: "neutral",
+  slot: "label",
   variant: "text",
 }
 
 export const Sentiment = BaseTemplate.bind();
 Sentiment.args = {
   dot: false,
-  label: "label",
-  large: false,
+  size: "md",
+  icon: "",
   sentiment: "success",
+  slot: "label",
   variant: "text",
 }
 
 export const Dots = BaseTemplate.bind();
 Dots.args = {
   dot: true,
-  label: "label",
-  large: false,
+  icon: "",
+  size: "md",
   sentiment: "neutral",
+  slot: "label",
+  variant: "text",
+}
+
+export const Icon = BaseTemplate.bind();
+Icon.args = {
+  dot: false,
+  icon: "check",
+  size: "md",
+  sentiment: "neutral",
+  slot: "label",
   variant: "text",
 }
 
 export const Dropdown = BaseTemplate.bind();
 Dropdown.args = {
   dot: false,
-  label: "label",
-  large: false,
+  icon: "",
+  size: "md",
   sentiment: "neutral",
+  slot: "label",
   variant: "dropdown",
 }
 
 export const Tag = BaseTemplate.bind();
 Tag.args = {
   dot: false,
-  label: "label",
-  large: false,
+  icon: "",
+  size: "md",
   sentiment: "neutral",
+  slot: "label",
   variant: "tag",
 }
 
+export const Small = BaseTemplate.bind();
+Small.args = {
+  dot: false,
+  icon: "",
+  size: "sm",
+  sentiment: "neutral",
+  slot: "label",
+  variant: "text",
+}
+
 export const Large = BaseTemplate.bind();
 Large.args = {
   dot: false,
-  label: "label",
-  large: true,
+  icon: "",
+  size: "lg",
+  sentiment: "neutral",
+  slot: "label",
+  variant: "text",
+}
+
+export const TagWithRemoveUrl = BaseTemplate.bind();
+TagWithRemoveUrl.args = {
+  dot: false,
+  icon: "",
+  size: "md",
+  sentiment: "neutral",
+  slot: "Filter Applied",
+  variant: "tag",
+  removeUrl: "/filters/remove/1",
+}
+
+export const TagWithHttpMethod = BaseTemplate.bind();
+TagWithHttpMethod.args = {
+  dot: false,
+  icon: "",
+  size: "md",
+  sentiment: "danger",
+  slot: "Delete Me",
+  variant: "tag",
+  removeUrl: "/tags/1",
+  removeHttpMethod: "delete",
+}
+
+export const TagWithRemoveTarget = BaseTemplate.bind();
+TagWithRemoveTarget.args = {
+  dot: false,
+  icon: "",
+  size: "md",
+  sentiment: "info",
+  slot: "Clear Filters (New Tab)",
+  variant: "tag",
+  removeUrl: "/clear-filters",
+  removeTarget: "_blank",
+}
+
+export const TruncatedLabel = BaseTemplate.bind();
+TruncatedLabel.args = {
+  dot: false,
+  icon: "",
+  size: "md",
   sentiment: "neutral",
+  slot: "A very long label that would otherwise overflow the chip",
   variant: "tag",
+  maxWidth: "200px",
 }

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

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

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

@@ -0,0 +1,499 @@
+:host {
+  display: block;
+}
+
+:host([aria-disabled=true]) .pds-combobox__input-icon {
+  color: var(--pine-color-text-disabled);
+  pointer-events: none;
+}
+
+.pds-combobox {
+  position: relative;
+}
+
+.pds-combobox__label {
+  color: var(--pine-color-text-label);
+  display: block;
+  font: var(--pine-typography-body-medium);
+  letter-spacing: var(--pine-letter-spacing);
+  margin-block-end: var(--pine-dimension-2xs);
+}
+
+.pds-combobox__input-wrapper {
+  align-items: center;
+  display: flex;
+  position: relative;
+  width: 100%;
+}
+
+.pds-combobox__input {
+  background: var(--pine-color-background-container);
+  border: var(--pine-border);
+  border-radius: var(--pine-dimension-125);
+  box-sizing: border-box;
+  color: var(--pine-color-text-strong);
+  flex: 1;
+  font: var(--pine-typography-body-medium);
+  padding: var(--pine-dimension-xs) var(--pine-dimension-450) var(--pine-dimension-xs) var(--pine-dimension-150);
+  transition: border-color var(--pine-motion-duration-base) ease;
+  width: 100%;
+}
+.pds-combobox__input:hover:not(:disabled) {
+  border-color: var(--pine-color-border-hover);
+}
+.pds-combobox__input:disabled {
+  background: var(--pine-color-background-container-disabled);
+  border-color: var(--pine-color-border-disabled);
+  color: var(--pine-color-text-disabled);
+  cursor: not-allowed;
+}
+.pds-combobox__input:disabled::placeholder {
+  color: var(--pine-color-text-placeholder-disabled);
+}
+.pds-combobox__input:focus-visible {
+  border-color: var(--pine-color-border-active);
+  outline: var(--pine-outline-focus);
+  outline-offset: var(--pine-border-width);
+}
+.pds-combobox__input::placeholder {
+  color: var(--pine-color-text-placeholder);
+}
+.pds-combobox__input.pds-combobox__input--invalid {
+  background: var(--pine-color-red-050);
+  border-color: var(--pine-color-border-danger);
+}
+:host-context([data-theme=dark]) .pds-combobox__input.pds-combobox__input--invalid {
+  background: var(--pine-color-red-950);
+}
+.pds-combobox__input.pds-combobox__input--invalid:hover:not(:disabled) {
+  border-color: var(--pine-color-border-danger);
+}
+.pds-combobox__input.pds-combobox__input--invalid:focus-visible {
+  outline-color: var(--pine-color-focus-ring-danger);
+}
+
+.pds-combobox__input-icon {
+  color: var(--pine-color-text-secondary);
+  inset-inline-end: var(--pine-dimension-150);
+  pointer-events: none;
+  position: absolute;
+  z-index: calc(var(--pine-z-index-raised) - 1);
+}
+
+.pds-combobox__helper {
+  color: var(--pine-color-text-message);
+  font: var(--pine-typography-body-sm-medium);
+  margin-block-start: var(--pine-dimension-2xs);
+}
+
+.pds-combobox__error {
+  align-items: flex-start;
+  color: var(--pine-color-text-message-danger);
+  display: flex;
+  font: var(--pine-typography-body-sm-medium);
+  gap: var(--pine-dimension-2xs);
+  margin-block-start: var(--pine-dimension-2xs);
+}
+.pds-combobox__error pds-icon {
+  flex-shrink: 0;
+  margin-block-start: var(--pine-dimension-025);
+}
+
+.pds-combobox__listbox {
+  background: var(--pine-color-background-overlay);
+  border: 0;
+  border-radius: var(--pine-dimension-125);
+  box-shadow: var(--pine-box-shadow);
+  list-style: none;
+  margin: 0;
+  min-width: 220px;
+  overflow-y: auto;
+  padding: var(--pine-dimension-xs);
+  position: absolute;
+  z-index: var(--pine-z-index-raised);
+}
+
+.pds-combobox__option {
+  align-items: center;
+  background: transparent;
+  border-radius: var(--pine-dimension-125);
+  color: var(--pine-color-text-secondary);
+  cursor: pointer;
+  display: flex;
+  font: var(--pine-typography-body-medium);
+  justify-content: space-between;
+  padding: var(--pine-dimension-xs) var(--pine-dimension-sm);
+  position: relative;
+  /* stylelint-disable-next-line pine-design-system/no-hardcoded-motion -- 0.15s off-grid micro-transition; no exact motion token */
+  transition: background 0.15s;
+}
+.pds-combobox__option[aria-selected=true] {
+  background: var(--pine-color-background-muted);
+}
+.pds-combobox__option:focus-visible {
+  outline: 0;
+}
+
+.pds-combobox__option.pds-combobox__option--layout .pds-combobox__option-layout-wrapper {
+  align-items: center;
+  display: flex;
+  width: 100%;
+}
+
+.pds-combobox__option.pds-combobox__option--chip .pds-combobox__option-chip {
+  align-items: center;
+  display: flex;
+  width: 100%;
+}
+
+.pds-combobox__option:last-child {
+  margin-block-end: 0;
+}
+
+.pds-combobox__option--highlighted,
+.pds-combobox__option[selected],
+.pds-combobox__option--selected {
+  background: var(--pine-color-background-muted);
+}
+
+.pds-combobox__option-check {
+  color: currentColor;
+  font-size: var(--pine-dimension-150);
+  margin-inline-start: var(--pine-dimension-150);
+}
+
+.pds-combobox__group-label {
+  color: var(--pine-color-text-tertiary);
+  cursor: default;
+  font: var(--pine-typography-heading-caption);
+  margin-block-end: var(--pine-dimension-2xs);
+  margin-block-start: var(--pine-dimension-150);
+  padding: var(--pine-dimension-2xs) var(--pine-dimension-sm);
+  text-transform: uppercase;
+}
+.pds-combobox__group-label:first-child {
+  margin-block-start: 0;
+}
+
+.pds-combobox__loading {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  padding: var(--pine-dimension-150);
+}
+
+.pds-combobox__empty {
+  color: var(--pine-color-text-tertiary);
+  padding: var(--pine-dimension-150) var(--pine-dimension-sm);
+  text-align: center;
+}
+
+.pds-combobox__load-more {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  padding: var(--pine-dimension-150);
+}
+
+.pds-combobox__button-trigger {
+  align-items: center;
+  background: var(--color-background-default, var(--pine-color-secondary));
+  border: var(--pine-border);
+  border-radius: var(--pine-border-radius-full);
+  color: var(--color-text-default, var(--pine-color-text-inverse-emphasis));
+  cursor: pointer;
+  display: flex;
+  font: var(--pine-typography-body-medium);
+  justify-content: space-between;
+  min-height: var(--pine-dimension-450);
+  outline: none;
+  padding: 0 var(--pine-dimension-sm);
+  /* stylelint-disable-next-line pine-design-system/no-hardcoded-motion -- 0.15s off-grid micro-transition; no exact motion token */
+  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
+  width: fit-content;
+}
+.pds-combobox__button-trigger .pds-combobox__button-trigger-layout-wrapper {
+  align-items: center;
+  display: flex;
+  flex: 1;
+}
+.pds-combobox__button-trigger .trigger-content {
+  align-items: center;
+  display: flex;
+  width: 100%;
+}
+
+.pds-combobox__button-trigger:focus-visible {
+  border-color: var(--color-border-focus, var(--pine-color-border));
+  box-shadow: 0 0 0 2px var(--color-outline, var(--pine-color-focus-ring));
+}
+
+.pds-combobox__button-trigger:hover {
+  background: var(--color-background-hover, var(--pine-color-secondary-hover));
+  border-color: var(--color-border-hover, var(--pine-color-border-hover));
+}
+
+.pds-combobox__button-trigger[aria-disabled=true],
+.pds-combobox__button-trigger:disabled {
+  background: var(--color-background-disabled, var(--pine-color-secondary-disabled));
+  border-color: var(--color-border-disabled, var(--pine-color-border-disabled));
+  color: var(--color-text-disabled, var(--pine-color-text-secondary-disabled));
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.pds-combobox__button-trigger-label {
+  color: inherit;
+  flex: 1 1 auto;
+  text-align: start;
+}
+
+.pds-combobox__button-trigger--input-shape {
+  border-radius: var(--pine-dimension-125);
+  min-height: var(--pine-dimension-500);
+}
+
+.pds-combobox__button-trigger-chevron {
+  color: currentColor;
+  margin-inline-start: var(--pine-dimension-150);
+}
+
+.pds-combobox__button-trigger--primary {
+  --color-background-default: var(--pine-color-primary);
+  --color-background-hover: var(--pine-color-primary-hover);
+  --color-background-disabled: var(--pine-color-primary-disabled);
+  --color-border-default: var(--pine-color-primary);
+  --color-border-hover: var(--pine-color-primary-hover);
+  --color-border-disabled: var(--pine-color-primary-disabled);
+  --color-border-focus: var(--pine-color-primary);
+  --color-text-default: var(--pine-color-text-primary);
+  --color-text-disabled: var(--pine-color-text-primary-disabled);
+  --color-outline: var(--pine-color-focus-ring);
+}
+
+.pds-combobox__button-trigger--accent {
+  --color-background-default: var(--pine-color-accent);
+  --color-background-hover: var(--pine-color-accent-hover);
+  --color-background-disabled: var(--pine-color-accent-disabled);
+  --color-border-default: var(--pine-color-accent);
+  --color-border-hover: var(--pine-color-accent-hover);
+  --color-border-disabled: var(--pine-color-accent-disabled);
+  --color-border-focus: var(--pine-color-accent);
+  /* stylelint-disable-next-line pine-design-system/prefer-semantic-tokens */
+  --color-text-default: var(--pine-color-white);
+  --color-text-disabled: var(--pine-color-text-accent-disabled);
+  --color-outline: var(--pine-color-focus-ring);
+}
+
+.pds-combobox__button-trigger--secondary {
+  --color-background-default: var(--pine-color-secondary);
+  --color-background-hover: var(--pine-color-secondary-hover);
+  --color-background-disabled: var(--pine-color-secondary-disabled);
+  --color-border-default: var(--pine-color-border);
+  --color-border-hover: var(--pine-color-border-hover);
+  --color-border-disabled: var(--pine-color-border-disabled);
+  --color-border-focus: var(--pine-color-border);
+  --color-text-default: var(--pine-color-text-secondary);
+  --color-text-disabled: var(--pine-color-text-secondary-disabled);
+  --color-outline: var(--pine-color-focus-ring);
+}
+
+.pds-combobox__button-trigger--destructive {
+  --color-background-default: var(--pine-color-danger);
+  --color-background-hover: var(--pine-color-danger-hover);
+  --color-background-disabled: var(--pine-color-danger-disabled);
+  --color-border-default: var(--pine-color-danger);
+  --color-border-hover: var(--pine-color-danger-hover);
+  --color-border-disabled: var(--pine-color-danger-disabled);
+  --color-border-focus: var(--pine-color-danger);
+  /* stylelint-disable-next-line pine-design-system/prefer-semantic-tokens */
+  --color-text-default: var(--pine-color-white);
+  --color-text-disabled: var(--pine-color-text-danger-disabled);
+  --color-outline: var(--pine-color-focus-ring-danger);
+}
+
+.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;
+}
+
+[data-layout] {
+  border-radius: var(--pine-dimension-125);
+  padding-block: var(--pine-dimension-xs);
+}
+
+.pds-combobox__chip-trigger {
+  align-items: center;
+  border-radius: var(--pine-dimension-sm);
+  cursor: pointer;
+  display: inline-flex;
+  font: var(--pine-typography-body-medium);
+  justify-content: space-between;
+  outline: none;
+  padding-block: var(--pine-dimension-025);
+  padding-inline: var(--pine-dimension-150);
+  /* stylelint-disable-next-line pine-design-system/no-hardcoded-motion -- 0.15s off-grid micro-transition; no exact motion token */
+  transition: all 0.15s ease;
+  width: fit-content;
+}
+.pds-combobox__chip-trigger .pds-combobox__chip-trigger-layout-wrapper {
+  align-items: center;
+  display: flex;
+  flex: 1;
+}
+.pds-combobox__chip-trigger .trigger-content {
+  align-items: center;
+  display: flex;
+  width: 100%;
+}
+.pds-combobox__chip-trigger:focus-visible {
+  outline: var(--pine-outline-focus);
+  outline-offset: var(--pine-border-width);
+}
+.pds-combobox__chip-trigger[aria-disabled=true] {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.pds-combobox__chip-trigger-label {
+  color: inherit;
+  flex: 1 1 auto;
+  text-align: start;
+}
+
+.pds-combobox__chip-trigger-chevron {
+  color: currentColor;
+  margin-inline-start: var(--pine-dimension-150);
+}
+
+.pds-combobox__chip-trigger-icon {
+  margin-inline-end: var(--pine-dimension-2xs);
+}
+
+.pds-combobox__chip-trigger--neutral,
+.pds-combobox__chip-trigger--accent,
+.pds-combobox__chip-trigger--success,
+.pds-combobox__chip-trigger--warning,
+.pds-combobox__chip-trigger--danger,
+.pds-combobox__chip-trigger--info {
+  background: var(--chip-bg);
+  border: var(--pine-border-width) solid var(--chip-border);
+  color: var(--chip-text);
+}
+.pds-combobox__chip-trigger--neutral:hover:not([aria-disabled=true]),
+.pds-combobox__chip-trigger--accent:hover:not([aria-disabled=true]),
+.pds-combobox__chip-trigger--success:hover:not([aria-disabled=true]),
+.pds-combobox__chip-trigger--warning:hover:not([aria-disabled=true]),
+.pds-combobox__chip-trigger--danger:hover:not([aria-disabled=true]),
+.pds-combobox__chip-trigger--info:hover:not([aria-disabled=true]) {
+  background: var(--chip-bg-hover);
+}
+.pds-combobox__chip-trigger--neutral:focus-visible,
+.pds-combobox__chip-trigger--accent:focus-visible,
+.pds-combobox__chip-trigger--success:focus-visible,
+.pds-combobox__chip-trigger--warning:focus-visible,
+.pds-combobox__chip-trigger--danger:focus-visible,
+.pds-combobox__chip-trigger--info:focus-visible {
+  border-color: var(--chip-border);
+}
+
+.pds-combobox__chip-trigger--neutral {
+  --chip-bg: var(--pine-chip-color-neutral);
+  --chip-bg-hover: var(--pine-chip-color-neutral-hover);
+  --chip-border: var(--pine-chip-color-neutral-hover);
+  --chip-text: var(--pine-color-text-neutral);
+}
+
+.pds-combobox__chip-trigger--accent {
+  --chip-bg: var(--pine-chip-color-accent);
+  --chip-bg-hover: var(--pine-chip-color-accent-hover);
+  --chip-border: var(--pine-chip-color-accent-hover);
+  --chip-text: var(--pine-color-text-accent);
+}
+
+.pds-combobox__chip-trigger--success {
+  --chip-bg: var(--pine-chip-color-success);
+  --chip-bg-hover: var(--pine-chip-color-success-hover);
+  --chip-border: var(--pine-chip-color-success-hover);
+  --chip-text: var(--pine-color-text-success);
+}
+
+.pds-combobox__chip-trigger--warning {
+  --chip-bg: var(--pine-chip-color-warning);
+  --chip-bg-hover: var(--pine-chip-color-warning-hover);
+  --chip-border: var(--pine-chip-color-warning-hover);
+  --chip-text: var(--pine-color-text-warning);
+}
+
+.pds-combobox__chip-trigger--danger {
+  --chip-bg: var(--pine-chip-color-danger);
+  --chip-bg-hover: var(--pine-chip-color-danger-hover);
+  --chip-border: var(--pine-chip-color-danger-hover);
+  --chip-text: var(--pine-color-text-danger);
+}
+
+.pds-combobox__chip-trigger--info {
+  --chip-bg: var(--pine-chip-color-info);
+  --chip-bg-hover: var(--pine-chip-color-info-hover);
+  --chip-border: var(--pine-chip-color-info-hover);
+  --chip-text: var(--pine-color-text-info);
+}
+
+.pds-combobox__chip-trigger--brand {
+  /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */
+  background: linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);
+  border: 0;
+  color: var(--pine-color-text-neutral);
+  padding: 1px;
+  position: relative;
+}
+.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-label {
+  /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: calc(var(--pine-dimension-sm) - 1px);
+  color: var(--pine-color-text-neutral);
+  font-weight: var(--pine-font-weight-medium);
+  padding: var(--pine-dimension-025) var(--pine-dimension-150);
+  position: relative;
+  z-index: 1;
+}
+.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-chevron {
+  position: relative;
+  z-index: 1;
+}
+.pds-combobox__chip-trigger--brand:hover:not([aria-disabled=true]) .pds-combobox__chip-trigger-label {
+  /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */
+  background: rgba(255, 255, 255, 0.8);
+}
+
+.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand) {
+  padding: var(--pine-dimension-none);
+}
+.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand) .pds-combobox__chip-trigger-label {
+  padding: var(--pine-dimension-025) var(--pine-dimension-150);
+}
+
+.pds-combobox__chip-trigger--large .pds-combobox__chip-trigger-label {
+  font-family: var(--pine-font-family-heading);
+  font-size: var(--pine-font-size-heading-6);
+  font-weight: var(--pine-font-weight-medium);
+  letter-spacing: var(--pine-letter-spacing-heading-6);
+}
+
+.pds-combobox__chip-trigger--dot .pds-combobox__chip-trigger-label::before {
+  border: var(--pine-border-width) solid transparent;
+  border-radius: var(--pine-border-radius-full);
+  content: "";
+  display: inline-block;
+  height: var(--pine-dimension-2xs);
+  margin-inline-end: var(--pine-dimension-2xs);
+  width: var(--pine-dimension-2xs);
+}