@oscarpalmer/oui 0.36.0 → 0.38.0

package/dist/css/tabs.css

@@ -0,0 +1,103 @@
+/*! https://github.com/oscarpalmer/oui */
+
+
+:where(oui-tabs) {
+  display: flex;
+}
+:where(oui-tabs:not([orientation=horizontal i])) {
+  flex-flow: column nowrap;
+}
+:where(oui-tabs[orientation=vertical i]) {
+  flex-flow: row nowrap;
+}
+
+:where([oui-tabs-content]) {
+  padding: 1em;
+  flex: 1;
+  background-color: var(--oui-absolute);
+  border: 1px solid var(--oui-gray-3);
+  position: relative;
+  z-index: 0;
+}
+
+:where([oui-tabs-tab]) {
+  --oui-background-percentage: 25%;
+  --oui-background-value: var(--oui-gray-2);
+  --oui-foreground-percentage: 0%;
+  --oui-foreground-value: var(--oui-gray-8);
+  --oui-outline-percentage: 100%;
+  --oui-outline-value: var(--oui-gray-6);
+  --oui-shadow-inset: color-mix(in oklab, var(--oui-absolute), transparent 75%);
+  --oui-shadow-percentage: 82.5%;
+  --oui-shadow-value: color-mix(
+  	in oklab,
+  	var(--oui-outline-value),
+  	transparent var(--oui-shadow-percentage)
+  );
+  box-shadow: inset 0 1px 0 0 var(--oui-shadow-inset), 0 0 0 1px var(--oui-shadow-value), 0 1px 2px -0.5px var(--oui-shadow-value), 0 2px 4px -1px var(--oui-shadow-value), 0 4px 8px -2px var(--oui-shadow-value);
+  padding: 0.5em 0.75em;
+  display: inline-flex;
+  flex-flow: row wrap;
+  gap: 0.75em;
+  align-items: center;
+  border-radius: 0.25em;
+  background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
+  outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
+  border: none;
+  color: color-mix(in oklab, var(--oui-foreground-value), transparent var(--oui-foreground-percentage));
+  line-height: 1.25;
+  transition: 0.125s ease-in-out;
+  transition-property: background, outline, box-shadow, color;
+}
+:where([oui-tabs-tab]):focus-visible {
+  --oui-outline-percentage: 75%;
+}
+@media (hover: hover) {
+  :where([oui-tabs-tab]):not([disabled], [aria-disabled=true i]):hover {
+    --oui-background-percentage: 50%;
+    --oui-foreground-percentage: 25%;
+    --oui-shadow-percentage: 90%;
+  }
+}
+:where([oui-tabs-tab]):not([disabled], [aria-disabled=true i]):active {
+  box-shadow: 0 0 0 1px var(--oui-shadow-value), inset 0 1px 2px 0 var(--oui-shadow-value), inset 0 2px 4px 0 var(--oui-shadow-value);
+  scale: 0.95;
+}
+:where([oui-tabs-tab]):not([disabled], [aria-disabled=true i]):active[aria-pressed=true i], :where([oui-tabs-tab]):not([disabled], [aria-disabled=true i]):active[aria-selected=true i] {
+  scale: 1;
+}
+:where([oui-tabs-tab])[disabled], :where([oui-tabs-tab])[aria-disabled=true i] {
+  --oui-background-percentage: 80%;
+  --oui-foreground-percentage: 25%;
+  --oui-shadow-percentage: 92.5%;
+  font-style: italic;
+}
+:where([oui-tabs-tab]) {
+  font-size: 0.75rem;
+  flex-shrink: 0;
+  align-self: flex-end;
+}
+:where([oui-tabs-tab][aria-selected=true i]) {
+  --oui-background-percentage: 80%;
+  box-shadow: 0 0 0 1px var(--oui-shadow-value), inset 0 1px 2px -0.5px var(--oui-shadow-value), inset 0 2px 4px -1px var(--oui-shadow-value);
+}
+
+:where([oui-tabs-tablist]) {
+  display: flex;
+  gap: 0.5em;
+  position: relative;
+  z-index: 0;
+}
+:where([oui-tabs-tablist]:focus-within) {
+  z-index: 1;
+}
+:where([oui-tabs-tablist][aria-orientation=horizontal i]) {
+  margin: 0 0 0.5em;
+  flex-flow: row wrap;
+}
+:where([oui-tabs-tablist][aria-orientation=vertical i]) {
+  margin: 0 0.5em 0 0;
+  flex-flow: column wrap;
+}
+
+

package/dist/js/color-picker.d.mts

@@ -0,0 +1,213 @@
+import { Color, HSLAColor, HSLColor, HWBAColor, HWBColor, RGBAColor, RGBColor } from "@oscarpalmer/atoms/color";
+//#region src/js/color-picker.d.ts
+declare global {
+  interface HTMLElementTagNameMap {
+    [TAGNAME]: OuiColorPickerElement;
+  }
+}
+declare class OuiColorPickerElement extends HTMLElement {
+  #private;
+  static formAssociated: boolean;
+  static observedAttributes: string[];
+  /**
+   * Is the color picker disabled?
+   */
+  get disabled(): boolean;
+  /**
+   * Should the color picker be disabled?
+   */
+  set disabled(value: boolean);
+  /**
+   * Form element associated with the color picker
+   */
+  get form(): HTMLFormElement | null;
+  /**
+   * Color value as hexadecimal string
+   */
+  get hex(): string;
+  /**
+   * Set color value from a hexadecimal string
+   */
+  set hex(value: string);
+  /**
+   * Color value as hexadecimal string with alpha channel
+   */
+  get hexa(): string;
+  /**
+   * Set color value from a hexadecimal string with alpha channel
+   */
+  set hexa(value: string);
+  /**
+   * Color value as an _HSL_ color object
+   */
+  get hsl(): HSLColor;
+  /**
+   * Set color value from an _HSL_ color object
+   */
+  set hsl(value: HSLColor);
+  /**
+   * Color value as an _HSLA_ color object _(HSL with alpha channel)_
+   */
+  get hsla(): HSLAColor;
+  /**
+   * Set color value from an _HSLA_ color object _(HSL with alpha channel)_
+   */
+  set hsla(value: HSLAColor);
+  /**
+   * Color value as an _HWB_ color object
+   */
+  get hwb(): HWBColor;
+  /**
+   * Set color value from an _HWB_ color object
+   */
+  set hwb(value: HWBColor);
+  /**
+   * Color value as an _HWBA_ color object _(HWB with alpha channel)_
+   */
+  get hwba(): HWBAColor;
+  /**
+   * Set color value from an _HWBA_ color object _(HWB with alpha channel)_
+   */
+  set hwba(value: HWBAColor);
+  /**
+   * Text input value
+   */
+  get input(): string;
+  /**
+   * Label elements associated with the color picker
+   */
+  get labels(): NodeList;
+  /**
+   * Is the color picker readonly?
+   */
+  get readonly(): boolean;
+  /**
+   * Should the color picker be readonly?
+   */
+  set readonly(value: boolean);
+  /**
+   * Is the color picker required?
+   */
+  get required(): boolean;
+  /**
+   * Should the color picker be required?
+   */
+  set required(value: boolean);
+  /**
+   * Color value as an _RGB_ color object
+   */
+  get rgb(): RGBColor;
+  /**
+   * Set color value from an _RGB_ color object
+   */
+  set rgb(value: RGBColor);
+  /**
+   * Color value as an _RGBA_ color object _(RGB with alpha channel)_
+   */
+  get rgba(): RGBAColor;
+  /**
+   * Set color value from an _RGBA_ color object _(RGB with alpha channel)_
+   */
+  set rgba(value: RGBAColor);
+  /**
+   * Validation message for the color picker
+   */
+  get validationMessage(): string;
+  /**
+   * Validity state for the color picker
+   */
+  get validity(): ValidityState;
+  /**
+   * Current color value
+   */
+  get value(): string;
+  /**
+   * Set color value from a string, _HSL(A)_, _HWB(A)_, or _RGB(A)_ color object
+   */
+  set value(value: string | HSLColor | HSLAColor | HWBColor | HWBAColor | RGBColor | RGBAColor);
+  /**
+   * Can the color picker be validated?
+   */
+  get willValidate(): boolean;
+  constructor();
+  attributeChangedCallback(name: string, _: string | null, value: string | null): void;
+  /**
+   * Check if the color picker is valid
+   *
+   * @returns `true` if the color picker is valid, otherwise `false`
+   */
+  checkValidity(): boolean;
+  /**
+   * Clear the color picker's value
+   */
+  clear(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  formDisabledCallback(disabled: boolean): void;
+  formResetCallback(): void;
+  formStateRestoreCallback(state: unknown, reason: unknown): void;
+  /**
+   * Check if the color picker is valid and report any validation errors
+   *
+   * @returns `true` if the color picker is valid, otherwise `false`
+   */
+  reportValidity(): boolean;
+  /**
+   * Set a custom validation message for the color picker
+   *
+   * @param message Validation message
+   */
+  setCustomValidity(message: string): void;
+  /**
+   * Set localizations for a specific language
+   *
+   * @param language Language code
+   * @param localizations Localizations for language
+   */
+  setLocalizations(language: string, localizations: Partial<OuiColorPickerLocalizations>): void;
+  /**
+   * Set localizations for one or more languages
+   *
+   * @param localizations Localizations for one or more languages
+   */
+  setLocalizations(localizations: Record<string, Partial<OuiColorPickerLocalizations>>): void;
+}
+declare class OuiColorPickerEvent extends Event {
+  readonly valid: boolean;
+  readonly value: OuiColorPickerEventValue;
+  constructor(type: 'oui:change' | 'oui:input', color: Color, valid: boolean);
+}
+type OuiColorPickerEventValue = {
+  hex: string;
+  hexa: string;
+  hsl: HSLColor;
+  hsla: HSLAColor;
+  hwb: HWBColor;
+  hwba: HWBAColor;
+  rgb: RGBColor;
+  rgba: RGBAColor;
+};
+type OuiColorPickerLocalizations = {
+  hue: string;
+  invalid: string;
+  lightnessSaturationLabel: string;
+  lightnessSaturationValue: string | ((lightness: number, saturation: number) => string);
+  opacity: string;
+  toggle: string;
+};
+/**
+ * Set localizations for a specific language
+ *
+ * @param language Language code
+ * @param localizations Localizations for language
+ */
+declare function setColorPickerLocalizations(language: string, localizations: Partial<OuiColorPickerLocalizations>): void;
+/**
+ * Set localizations for one or more languages
+ *
+ * @param localizations Localizations for one or more languages
+ */
+declare function setColorPickerLocalizations(localizations: Record<string, Partial<OuiColorPickerLocalizations>>): void;
+declare const TAGNAME = "oui-color-picker";
+//#endregion
+export { OuiColorPickerElement, OuiColorPickerEvent, setColorPickerLocalizations };