@oscarpalmer/oui 0.30.0 → 0.32.0

package/dist/css/badge.css

@@ -1,11 +1,7 @@
 /*! https://github.com/oscarpalmer/oui */
 
 :where(.oui-pill, .oui-tag) {
-  --oui-shadow-mixed: color-mix(
-  	in oklab,
-  	var(--oui-shadow, var(--oui-gray-6)),
-  	transparent 92.5%
-  );
+  --oui-shadow-mixed: color-mix(in oklab, var(--oui-shadow, var(--oui-gray-6)), transparent 92.5%);
   box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px var(--oui-shadow-mixed), 0 1px 2px -0.5px var(--oui-shadow-mixed), 0 2px 4px -1px var(--oui-shadow-mixed);
   display: inline-flex;
   flex-flow: row nowrap;

package/dist/css/combobox.css

@@ -1,5 +1,74 @@
+@charset "UTF-8";
 /*! https://github.com/oscarpalmer/oui */
 
+:where([oui-combobox-anchor]) {
+  --oui-background-percentage: 0%;
+  --oui-foreground-percentage: 0%;
+  --oui-outline-percentage: 100%;
+  --oui-outline-value: var(--oui-blue-6);
+  outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
+  outline-offset: 0;
+  transition: 0.125s ease-in-out;
+  align-content: center;
+  background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
+  border: 1px solid var(--oui-border-value, var(--oui-gray-3));
+  box-shadow: inset 0 2px 4px -1px var(--oui-gray-3);
+  color: color-mix(in oklab, var(--oui-foreground-value, inherit), transparent var(--oui-foreground-percentage));
+  -webkit-text-fill-color: color-mix(in oklab, var(--oui-foreground-value, inherit), transparent var(--oui-foreground-percentage));
+  --oui-background-value: var(--oui-absolute);
+  padding: 0.5em 2em 0.5em 0.75em;
+  border-radius: 0.25em;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E");
+  background-position: right 0.5em center;
+  background-repeat: no-repeat;
+  background-size: 1em;
+}
+:where([oui-combobox-anchor]:not([disabled], [readonly], [aria-disabled=true i]):focus), :where([oui-combobox-anchor]:not([disabled], [readonly], [aria-disabled=true i]):has(+ [oui-combobox-content]:focus-within)) {
+  --oui-border-value: var(--oui-blue-5);
+  --oui-foreground-value: inherit;
+  --oui-outline-percentage: 75%;
+  --oui-outline-value: var(--oui-blue-6);
+}
+@media (hover: hover) {
+  :where([oui-combobox-anchor]:not([disabled], [readonly], [aria-disabled=true i]):hover) {
+    --oui-border-value: var(--oui-blue-4);
+    --oui-foreground-percentage: 0%;
+    --oui-foreground-value: inherit;
+    --oui-outline-percentage: 90%;
+    --oui-outline-value: var(--oui-blue-6);
+  }
+}
+:where([oui-combobox-anchor]:is([disabled], [readonly], [aria-disabled=true i])) {
+  --oui-foreground-percentage: 25%;
+  font-style: italic;
+}
+:where([oui-combobox-anchor]:is([disabled], [readonly], [aria-disabled=true i]):focus) {
+  --oui-outline-percentage: 75%;
+}
+:where([oui-combobox-anchor]:is([disabled], [aria-disabled=true i])) {
+  --oui-background-percentage: 50%;
+}
+
+:where([oui-combobox-content]) {
+  --margin-bottom: 0.5em;
+  --margin-left: 0.5em;
+  --margin-right: 0.5em;
+  --margin-top: 0.5em;
+  inset-block: var(--margin-top) var(--margin-bottom);
+  inset-inline: var(--margin-left) var(--margin-right);
+}
+:where([oui-combobox-content])[oui-position$=bottom] {
+  --margin-bottom: 0;
+}
+:where([oui-combobox-content])[oui-position$=end] {
+  --margin-right: 0;
+}
+:where([oui-combobox-content])[oui-position$=start] {
+  --margin-left: 0;
+}
+:where([oui-combobox-content])[oui-position$=top] {
+  --margin-top: 0;
+}
 :where([oui-combobox-content]) {
   box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px -0.5px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.05), 0 4px 8px -2px rgba(0, 0, 0, 0.05), 0 8px 16px -4px rgba(0, 0, 0, 0.05), 0 16px 32px -8px rgba(0, 0, 0, 0.05), 0 32px 64px -16px rgba(0, 0, 0, 0.05), 0 64px 128px -32px rgba(0, 0, 0, 0.05);
   width: -moz-fit-content;
@@ -10,17 +79,172 @@
   max-height: max(25vh, 32rem);
   min-width: var(--oui-combobox-width, auto);
   flex-flow: column nowrap;
+  border-radius: 0.25em;
 }
 :where([oui-combobox-content]):popover-open {
   display: flex !important;
 }
 
+:where([oui-combobox-empty]) {
+  padding: 1em;
+  text-align: center;
+  font-style: italic;
+}
+
+:where([oui-combobox-filter], [oui-combobox-header])::after {
+  content: "";
+  width: 100%;
+  height: 0.25em;
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.125), transparent);
+  position: absolute;
+  bottom: -0.25em;
+  left: 0;
+}
+
+:where([oui-combobox-filter]) {
+  padding: 0.75em;
+  background-color: var(--oui-yellow-0);
+  border-radius: 0.25em 0.25em 0 0;
+  position: relative;
+  z-index: 1;
+}
+
+:where([oui-combobox-filter-input]) {
+  --oui-background-percentage: 0%;
+  --oui-foreground-percentage: 0%;
+  --oui-outline-percentage: 100%;
+  --oui-outline-value: var(--oui-blue-6);
+  outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
+  outline-offset: 0;
+  transition: 0.125s ease-in-out;
+  align-content: center;
+  background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
+  border: 1px solid var(--oui-border-value, var(--oui-gray-3));
+  box-shadow: inset 0 2px 4px -1px var(--oui-gray-3);
+  color: color-mix(in oklab, var(--oui-foreground-value, inherit), transparent var(--oui-foreground-percentage));
+  -webkit-text-fill-color: color-mix(in oklab, var(--oui-foreground-value, inherit), transparent var(--oui-foreground-percentage));
+  --oui-background-value: var(--oui-absolute);
+  --oui-border-value: var(--oui-yellow-3);
+  width: 100%;
+  padding: 0.5em 0.75em;
+  outline-width: 0;
+  border-radius: 0.25em;
+  font-size: 0.875rem;
+}
+:where(:where([oui-combobox-filter-input]):not([disabled], [readonly], [aria-disabled=true i]):focus) {
+  --oui-border-value: var(--oui-blue-5);
+  --oui-foreground-value: inherit;
+  --oui-outline-percentage: 75%;
+  --oui-outline-value: var(--oui-blue-6);
+}
+@media (hover: hover) {
+  :where(:where([oui-combobox-filter-input]):not([disabled], [readonly], [aria-disabled=true i]):hover) {
+    --oui-border-value: var(--oui-blue-4);
+    --oui-foreground-percentage: 0%;
+    --oui-foreground-value: inherit;
+    --oui-outline-percentage: 90%;
+    --oui-outline-value: var(--oui-blue-6);
+  }
+}
+:where(:where([oui-combobox-filter-input]):is([disabled], [readonly], [aria-disabled=true i])) {
+  --oui-foreground-percentage: 25%;
+  font-style: italic;
+}
+:where(:where([oui-combobox-filter-input]):is([disabled], [readonly], [aria-disabled=true i]):focus) {
+  --oui-outline-percentage: 75%;
+}
+:where(:where([oui-combobox-filter-input]):is([disabled], [aria-disabled=true i])) {
+  --oui-background-percentage: 50%;
+}
+
+:where([oui-combobox-filter-label]) {
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  clip-path: inset(50%) !important;
+  overflow: hidden !important;
+  border: 0 !important;
+  white-space: nowrap !important;
+  display: inline-flex;
+  position: absolute;
+}
+
+:where([oui-combobox-header]) {
+  padding: 0.5em 1em;
+  background-color: var(--oui-gray-0);
+  font-size: 0.75em;
+  font-weight: bold;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
 :where([oui-combobox-list]) {
   overflow: auto;
+  position: relative;
 }
 
 :where([oui-combobox-option]) {
+  padding: 0.5em 0.75em;
+  outline: 4px solid transparent;
+  outline-offset: -4px;
+  line-height: 1.25;
   cursor: pointer;
+  transition: 0.125s ease-in-out;
+}
+:where([oui-combobox-option][aria-selected=true i]) {
+  background-color: var(--oui-blue-3);
+  color: var(--oui-blue-9);
+}
+:where(oui-combobox[multiple] [oui-combobox-option][aria-selected=true i])::before {
+  content: "✓";
+  margin: 0 0.75em 0 0;
+}
+@media (hover: hover) {
+  :where(:where(oui-combobox:not([disabled], [readonly], [aria-disabled=true i]) [oui-combobox-option]):hover) {
+    background-color: var(--oui-blue-1);
+    color: var(--oui-blue-8);
+  }
+}
+
+:where([oui-combobox-option-active]) {
+  background-color: var(--oui-blue-1);
+  outline-color: var(--oui-blue-4);
+  color: var(--oui-blue-8);
+}
+
+:where([oui-combobox-selection]) {
+  max-height: 8rem;
+  display: flex;
+  padding: 0.5em;
+  margin: -0.5em -0.5em -0.5em -0.75em;
+  flex-flow: row wrap;
+  gap: 0.5em;
+  overflow: auto;
+  list-style: none;
+}
+
+:where([oui-combobox-selection-item]) {
+  --oui-shadow-mixed: color-mix(in oklab, var(--oui-shadow, var(--oui-gray-6)), transparent 92.5%);
+  box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px var(--oui-shadow-mixed), 0 1px 2px -0.5px var(--oui-shadow-mixed), 0 2px 4px -1px var(--oui-shadow-mixed);
+  display: inline-flex;
+  flex-flow: row nowrap;
+  gap: 0.5em;
+  background-color: color-mix(in oklab, var(--oui-background, var(--oui-gray-0)), transparent 25%);
+  color: var(--oui-foreground, var(--oui-gray-8));
+  line-height: 1.25;
+  border-radius: 3em;
+  padding: 0.5em 1em;
+  gap: 0.75em;
+  font-size: 0.875em;
+  transition: 0.125s ease-in-out;
+}
+@media (hover: hover) {
+  :where(oui-combobox:not([disabled], [readonly], [aria-disabled=true i]) [oui-combobox-selection-item]:hover) {
+    --oui-background: var(--oui-red-0);
+    --oui-foreground: var(--oui-red-8);
+    --oui-shadow: var(--oui-red-6);
+  }
 }
 
 

package/dist/css/form.css

@@ -18,6 +18,7 @@
   outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
   outline-offset: 0;
   transition: 0.125s ease-in-out;
+  align-content: center;
   background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
   border: 1px solid var(--oui-border-value, var(--oui-gray-3));
   box-shadow: inset 0 2px 4px -1px var(--oui-gray-3);
@@ -94,6 +95,7 @@
   outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
   outline-offset: 0;
   transition: 0.125s ease-in-out;
+  align-content: center;
   background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
   border: 1px solid var(--oui-border-value, var(--oui-gray-3));
   box-shadow: inset 0 2px 4px -1px var(--oui-gray-3);
@@ -114,6 +116,7 @@
   outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
   outline-offset: 0;
   transition: 0.125s ease-in-out;
+  align-content: center;
   background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
   border: 1px solid var(--oui-border-value, var(--oui-gray-3));
   box-shadow: inset 0 2px 4px -1px var(--oui-gray-3);
@@ -133,6 +136,7 @@
   outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
   outline-offset: 0;
   transition: 0.125s ease-in-out;
+  align-content: center;
   background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
   border: 1px solid var(--oui-border-value, var(--oui-gray-3));
   box-shadow: inset 0 2px 4px -1px var(--oui-gray-3);
@@ -424,57 +428,57 @@
     --oui-outline-value: var(--oui-blue-6);
   }
 }
-:where(.oui-input[disabled], .oui-input[readonly], .oui-input[aria-disabled=true i]) {
+:where(.oui-input:is([disabled], [readonly], [aria-disabled=true i])) {
   --oui-foreground-percentage: 25%;
   font-style: italic;
 }
-:where(.oui-input[disabled], .oui-input[readonly], .oui-input[aria-disabled=true i])::file-selector-button {
+:where(.oui-input:is([disabled], [readonly], [aria-disabled=true i]))::file-selector-button {
   --oui-background-value: var(--oui-gray-1);
   cursor: default;
 }
-:where(.oui-input[disabled], .oui-input[readonly], .oui-input[aria-disabled=true i])::-moz-range-thumb {
+:where(.oui-input:is([disabled], [readonly], [aria-disabled=true i]))::-moz-range-thumb {
   --oui-background-value: var(--oui-gray-2);
   cursor: default;
 }
-:where(.oui-input[disabled], .oui-input[readonly], .oui-input[aria-disabled=true i])::-ms-thumb {
+:where(.oui-input:is([disabled], [readonly], [aria-disabled=true i]))::-ms-thumb {
   --oui-background-value: var(--oui-gray-2);
   cursor: default;
 }
-:where(.oui-input[disabled], .oui-input[readonly], .oui-input[aria-disabled=true i])::-webkit-slider-thumb {
+:where(.oui-input:is([disabled], [readonly], [aria-disabled=true i]))::-webkit-slider-thumb {
   --oui-background-value: var(--oui-gray-2);
   cursor: default;
 }
 :where(.oui-input:is([disabled], [readonly], [aria-disabled=true i]):focus) {
   --oui-outline-percentage: 75%;
 }
-:where(.oui-input[disabled], .oui-input[aria-disabled=true i]) {
+:where(.oui-input:is([disabled], [aria-disabled=true i])) {
   --oui-background-percentage: 50%;
 }
-:where(.oui-input[disabled], .oui-input[aria-disabled=true i])::-moz-range-thumb {
+:where(.oui-input:is([disabled], [aria-disabled=true i]))::-moz-range-thumb {
   --oui-background-value: var(--oui-gray-1);
   cursor: default;
 }
-:where(.oui-input[disabled], .oui-input[aria-disabled=true i])::-ms-thumb {
+:where(.oui-input:is([disabled], [aria-disabled=true i]))::-ms-thumb {
   --oui-background-value: var(--oui-gray-1);
   cursor: default;
 }
-:where(.oui-input[disabled], .oui-input[aria-disabled=true i])::-webkit-slider-thumb {
+:where(.oui-input:is([disabled], [aria-disabled=true i]))::-webkit-slider-thumb {
   --oui-background-value: var(--oui-gray-1);
   cursor: default;
 }
-:where(.oui-input[disabled], .oui-input[aria-disabled=true i])::-moz-range-track {
+:where(.oui-input:is([disabled], [aria-disabled=true i]))::-moz-range-track {
   --oui-background-percentage: 50%;
   --oui-background-value: var(--oui-gray-0);
 }
-:where(.oui-input[disabled], .oui-input[aria-disabled=true i])::-ms-track {
+:where(.oui-input:is([disabled], [aria-disabled=true i]))::-ms-track {
   --oui-background-percentage: 50%;
   --oui-background-value: var(--oui-gray-0);
 }
-:where(.oui-input[disabled], .oui-input[aria-disabled=true i])::-webkit-slider-runnable-track {
+:where(.oui-input:is([disabled], [aria-disabled=true i]))::-webkit-slider-runnable-track {
   --oui-background-percentage: 50%;
   --oui-background-value: var(--oui-gray-0);
 }
-:where(.oui-input[disabled], .oui-input[aria-disabled=true i])::-webkit-calendar-picker-indicator {
+:where(.oui-input:is([disabled], [aria-disabled=true i]))::-webkit-calendar-picker-indicator {
   opacity: 0.5;
 }
 
@@ -523,7 +527,7 @@
   transition: 0.125s ease-in-out;
 }
 @media (hover: hover) {
-  :where(:where(.oui-label)[for]:hover) {
+  :where(.oui-label[for]:hover) {
     color: var(--oui-blue-8);
   }
 }

package/dist/js/combobox.d.mts

@@ -8,18 +8,82 @@ declare class OuiComboboxElement extends HTMLElement {
   #private;
   static formAssociated: boolean;
   static observedAttributes: string[];
+  /**
+   * Is the combobox disabled?
+   */
   get disabled(): boolean;
+  /**
+   * Should the combobox be disabled?
+   */
   set disabled(value: boolean);
+  /**
+   * Maximum number of selected options
+   */
+  get max(): number | undefined;
+  /**
+   * Set the maximum number of selected options
+   */
+  set max(value: number);
+  /**
+   * Minimum number of selected options
+   */
+  get min(): number | undefined;
+  /**
+   * Set the minimum number of selected options
+   */
+  set min(value: number);
+  /**
+   * Does the combobox allow multiple values?
+   */
   get multiple(): boolean;
+  /**
+   * Name of the combobox
+   */
   get name(): string;
-  set name(value: string);
+  /**
+   * Is the combobox readonly?
+   */
+  get readonly(): boolean;
+  /**
+   * Should the combobox be readonly?
+   */
+  set readonly(value: boolean);
+  /**
+   * Is the combobox required?
+   */
   get required(): boolean;
+  /**
+   * Should the combobox be required?
+   */
   set required(value: boolean);
+  /**
+   * Selected options
+   */
+  get selected(): HTMLElement[];
+  /**
+   * Type of combobox
+   */
   get type(): OuiComboboxType;
+  /**
+   * Current value
+   */
   get value(): string;
+  /**
+   * Set the value
+   */
   set value(value: unknown);
+  /**
+   * Current values
+   */
+  get values(): string[];
+  /**
+   * Set the values
+   */
+  set values(value: unknown[]);
   constructor();
   attributeChangedCallback(name: string, _: string | null, value: string | null): void;
+  clear(): void;
+  formResetCallback(): void;
 }
 type OuiComboboxType = 'autocomplete' | 'select';
 declare const TAGNAME = "oui-combobox";