@pine-ds/core 3.6.0 → 3.8.0

package/dist/collection/components/pds-filters/pds-filter/filter-interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=filter-interface.js.map

package/dist/collection/components/pds-filters/pds-filter/filter-interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-interface.js","sourceRoot":"","sources":["../../../../src/components/pds-filters/pds-filter/filter-interface.ts"],"names":[],"mappings":"","sourcesContent":["export type PdsFilterVariant = 'default' | 'selected' | 'more' | 'clear';\n\nexport interface PdsFilterOpenEventDetail {\n  componentId: string;\n  variant: PdsFilterVariant;\n  text?: string;\n}\n\nexport interface PdsFilterCloseEventDetail {\n  componentId: string;\n  variant: PdsFilterVariant;\n  text?: string;\n}\n\nexport interface PdsFilterClearEventDetail {\n  componentId: string;\n  text?: string;\n}\n\nexport interface PdsFilterEvent<T> extends CustomEvent<T> {\n  readonly detail: T;\n  readonly target: HTMLPdsFilterElement | null;\n}\n"]}

package/dist/collection/components/pds-filters/pds-filter/pds-filter.css

@@ -0,0 +1,193 @@
+:host {
+  --box-shadow-focus: 0 0 0 1px var(--pine-color-white), 0 0 0 3px var(--pine-color-focus-ring);
+  display: inline-block;
+  position: relative;
+}
+
+.pds-filter__trigger {
+  align-items: center;
+  /* stylelint-disable-next-line property-no-unknown */
+  anchor-name: --filter-trigger;
+  background: var(--pine-color-background-container);
+  border: var(--pine-border-width-thin) solid var(--pine-color-border);
+  border-radius: var(--pine-dimension-100);
+  box-shadow: var(--pine-box-shadow-050);
+  box-sizing: border-box;
+  color: var(--pine-color-text-placeholder);
+  cursor: pointer;
+  display: inline-flex;
+  font-family: var(--pine-font-family-inter);
+  font-size: var(--pine-font-size-100);
+  font-weight: var(--pine-font-weight-400);
+  gap: var(--pine-dimension-050);
+  letter-spacing: var(--pine-letter-spacing-114);
+  line-height: var(--pine-line-height-150);
+  padding: var(--pine-dimension-025) var(--pine-dimension-125);
+  position: relative;
+  transition: all 0.2s ease;
+}
+.pds-filter__trigger pds-icon {
+  block-size: var(--pine-font-size-100);
+  color: var(--pine-color-grey-800);
+  flex-shrink: 0;
+  inline-size: var(--pine-font-size-100);
+}
+.pds-filter__trigger:hover, .pds-filter__trigger.pds-filter__trigger--open {
+  background-color: var(--pine-color-grey-100);
+  border-color: var(--pine-color-grey-400);
+  color: var(--pine-color-text-hover);
+}
+.pds-filter__trigger:hover pds-icon, .pds-filter__trigger.pds-filter__trigger--open pds-icon {
+  color: var(--pine-color-grey-800);
+}
+.pds-filter__trigger:focus-visible {
+  box-shadow: var(--box-shadow-focus);
+  outline: none;
+}
+.pds-filter__trigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.pds-filter__trigger--selected {
+  background-color: var(--pine-color-purple-050);
+  border-color: var(--pine-color-purple-500);
+  color: var(--pine-color-purple-600);
+}
+.pds-filter__trigger--selected pds-icon {
+  color: var(--pine-color-purple-600);
+}
+.pds-filter__trigger--selected:hover, .pds-filter__trigger--selected.pds-filter__trigger--open {
+  background-color: var(--pine-color-purple-100);
+  border-color: var(--pine-color-purple-500);
+  color: var(--pine-color-purple-600);
+}
+.pds-filter__trigger--selected:hover pds-icon, .pds-filter__trigger--selected.pds-filter__trigger--open pds-icon {
+  color: var(--pine-color-purple-600);
+}
+.pds-filter__trigger--selected:focus-visible {
+  box-shadow: var(--box-shadow-focus);
+  outline: none;
+}
+
+.pds-filter__trigger--more {
+  background-color: var(--pine-color-grey-050);
+  border: var(--pine-border-width-thin) dashed var(--pine-color-grey-300);
+  color: var(--pine-color-text-placeholder);
+}
+.pds-filter__trigger--more pds-icon {
+  color: var(--pine-color-grey-800);
+}
+.pds-filter__trigger--more:hover, .pds-filter__trigger--more.pds-filter__trigger--open {
+  background-color: var(--pine-color-grey-100);
+  border-color: var(--pine-color-grey-400);
+  color: var(--pine-color-text-hover);
+}
+.pds-filter__trigger--more:hover pds-icon, .pds-filter__trigger--more.pds-filter__trigger--open pds-icon {
+  color: var(--pine-color-grey-800);
+}
+.pds-filter__trigger--more:focus-visible {
+  box-shadow: var(--box-shadow-focus);
+  outline: none;
+}
+
+.pds-filter__trigger--clear {
+  background: transparent;
+  border: var(--pine-border-width-thin) solid transparent;
+  border-radius: var(--pine-dimension-100);
+  box-shadow: none;
+  color: var(--pine-color-purple-600);
+}
+.pds-filter__trigger--clear pds-icon {
+  color: var(--pine-color-purple-600);
+}
+.pds-filter__trigger--clear:hover {
+  background-color: var(--pine-color-purple-100);
+  border-color: var(--pine-color-purple-100);
+  color: var(--pine-color-purple-600);
+}
+.pds-filter__trigger--clear:hover pds-icon {
+  color: var(--pine-color-purple-600);
+}
+.pds-filter__trigger--clear:focus-visible {
+  box-shadow: var(--box-shadow-focus);
+  outline: none;
+}
+
+.pds-filter__button-content {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--pine-dimension-050);
+  max-inline-size: 148px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pds-filter__button-text {
+  line-height: var(--pine-line-height-150);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pds-filter__dropdown-icon {
+  block-size: var(--pine-dimension-200);
+  flex-shrink: 0;
+  inline-size: var(--pine-dimension-200);
+}
+
+.pds-filter__popover {
+  background-color: var(--pine-color-background-container);
+  border: 0;
+  border-radius: var(--pine-dimension-100);
+  box-shadow: var(--pine-box-shadow-100);
+  display: none;
+  inline-size: 228px;
+  inset: unset;
+  padding: var(--pine-dimension-100);
+  z-index: var(--pine-z-index-overlay);
+  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */
+  /* Modern browsers: CSS anchor positioning with JavaScript-controlled flipping */
+}
+.pds-filter__popover:popover-open, .pds-filter__popover.is-open {
+  display: block;
+}
+@supports (anchor-name: --test) {
+  .pds-filter__popover {
+    inset-block-start: calc(anchor(--filter-trigger bottom) + var(--pine-dimension-100));
+    inset-inline-start: anchor(--filter-trigger left);
+    position: fixed; /* Anchor positioning requires fixed positioning */
+    /* stylelint-disable-next-line property-no-unknown */
+    position-anchor: --filter-trigger;
+    /* CSS position-try disabled for precise JavaScript-controlled flipping */
+    /* Flipping classes applied by JavaScript for precise control */
+    /* Ensure fallback class works with flipping in modern browsers */
+  }
+  .pds-filter__popover.popover-flip-horizontal {
+    inset-inline-start: anchor(--filter-trigger right);
+    transform: translateX(-100%);
+  }
+  .pds-filter__popover.popover-flip-vertical {
+    inset-block-start: anchor(--filter-trigger top);
+    transform: translateY(calc(-100% - var(--pine-dimension-100)));
+  }
+  .pds-filter__popover.popover-flip-horizontal.popover-flip-vertical {
+    inset-block-start: anchor(--filter-trigger top);
+    inset-inline-start: anchor(--filter-trigger right);
+    transform: translate(-100%, calc(-100% - var(--pine-dimension-100)));
+  }
+  .pds-filter__popover.is-open.popover-flip-horizontal {
+    inset-inline-start: anchor(--filter-trigger right);
+    transform: translateX(-100%);
+  }
+  .pds-filter__popover.is-open.popover-flip-vertical {
+    inset-block-start: anchor(--filter-trigger top);
+    transform: translateY(calc(-100% - var(--pine-dimension-100)));
+  }
+  .pds-filter__popover.is-open.popover-flip-horizontal.popover-flip-vertical {
+    inset-block-start: anchor(--filter-trigger top);
+    inset-inline-start: anchor(--filter-trigger right);
+    transform: translate(-100%, calc(-100% - var(--pine-dimension-100)));
+  }
+}