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

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

@@ -0,0 +1,200 @@
+:host {
+  --box-shadow-focus: 0 0 0 1px var(--pine-color-background-container), 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);
+  border-radius: var(--pine-dimension-100);
+  box-shadow: var(--pine-box-shadow-050);
+  box-sizing: border-box;
+  color: var(--pine-color-text-tertiary);
+  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 var(--pine-motion-duration-base) ease;
+}
+.pds-filter__trigger pds-icon {
+  block-size: var(--pine-font-size-100);
+  color: var(--pine-color-text-secondary);
+  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-background-subtle);
+  border-color: var(--pine-color-border-hover);
+  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-text-secondary);
+}
+.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-background-container-hover);
+  border: var(--pine-border-width-thin) dashed var(--pine-color-border);
+  color: var(--pine-color-text-tertiary);
+}
+.pds-filter__trigger--more pds-icon {
+  color: var(--pine-color-text-secondary);
+}
+.pds-filter__trigger--more:hover, .pds-filter__trigger--more.pds-filter__trigger--open {
+  background-color: var(--pine-color-background-subtle);
+  border-color: var(--pine-color-border-hover);
+  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-text-secondary);
+}
+.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-overlay);
+  border: 0;
+  border-radius: var(--pine-dimension-100);
+  box-shadow: var(--pine-box-shadow-100);
+  box-sizing: border-box;
+  display: none;
+  inline-size: 244px;
+  inset: unset;
+  padding: var(--pine-dimension-100);
+  z-index: var(--pine-z-index-overlay);
+  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */
+}
+.pds-filter__popover:popover-open, .pds-filter__popover.is-open {
+  display: block;
+}
+.pds-filter__popover {
+  /* Modern browsers: CSS anchor positioning with JavaScript-controlled flipping */
+}
+@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 start);
+    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 */
+  }
+  .pds-filter__popover.popover-flip-horizontal {
+    inset-inline-end: anchor(--filter-trigger end);
+    inset-inline-start: auto;
+  }
+  .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-end: anchor(--filter-trigger end);
+    inset-inline-start: auto;
+    transform: translateY(calc(-100% - var(--pine-dimension-100)));
+  }
+  .pds-filter__popover {
+    /* Ensure fallback class works with flipping in modern browsers */
+  }
+  .pds-filter__popover.is-open.popover-flip-horizontal {
+    inset-inline-end: anchor(--filter-trigger end);
+    inset-inline-start: auto;
+  }
+  .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-end: anchor(--filter-trigger end);
+    inset-inline-start: auto;
+    transform: translateY(calc(-100% - var(--pine-dimension-100)));
+  }
+}