@birdycom/omniaui 0.11.0 → 0.11.1

package/dist/parts/forms-language-select.css

@@ -1,76 +1,89 @@
-/* File: packages/ui/src/parts/forms-language-select.css
-   Map: wrapper (icon + native select) -> icon -> select control -> chevron -> states -> --ghost / --currency
-   Language select: compact locale (or currency) switcher for a site header.
-   A native <select> inside a small frame with a leading icon or symbol. The app reacts to "change". */
-
-/* Wrapper: inline frame; the select is stretched over it so the whole pill is clickable. */
-.oc-language-select {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.375rem;
-  padding-inline: 0.625rem 0.5rem;
-  border: 1px solid var(--oc-input);
-  border-radius: 999px;
-  color: var(--oc-foreground);
-  font-size: 0.8rem;
-  transition: border-color var(--oc-transition-fast), background var(--oc-transition-fast);
-}
-
-.oc-language-select:hover { background: var(--oc-surface); }
-
-.oc-language-select:focus-within {
-  border-color: var(--oc-ring);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--oc-ring) 25%, transparent);
-}
-
-/* Leading icon (inline SVG globe) or symbol (€, $). Decorative: aria-hidden="true". */
-.oc-language-select-icon {
-  display: inline-flex;
-  flex: none;
-  inline-size: 1rem;
-  justify-content: center;
-  color: var(--oc-muted-foreground);
-  font-weight: 600;
-}
-
-.oc-language-select-icon svg { inline-size: 1rem; block-size: 1rem; }
-
-/* Native select without its own frame; room on the right for the chevron. */
-.oc-language-select-control {
-  appearance: none;
-  padding: 0.375rem 1.25rem 0.375rem 0;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  cursor: pointer;
-  outline: none;
-}
-
-.oc-language-select-control option {
-  background: var(--oc-background);
-  color: var(--oc-foreground);
-}
-
-/* Chevron drawn with two borders (no image, follows currentColor). */
-.oc-language-select::after {
-  content: "";
-  position: absolute;
-  inset-inline-end: 0.7rem;
-  inset-block-start: 50%;
-  inline-size: 0.35rem;
-  block-size: 0.35rem;
-  border-inline-end: 1.5px solid var(--oc-muted-foreground);
-  border-block-end: 1.5px solid var(--oc-muted-foreground);
-  transform: translateY(-70%) rotate(45deg);
-  pointer-events: none;
-}
-
-.oc-language-select:has(.oc-language-select-control:disabled) { opacity: 0.5; cursor: not-allowed; }
-
-/* Ghost: no frame, for dense headers and footers. */
-.oc-language-select--ghost { border-color: transparent; }
-
-/* Currency: the symbol in the icon slot gets the primary color. */
-.oc-language-select--currency .oc-language-select-icon { color: var(--oc-primary); }
+/* File: packages/ui/src/parts/forms-language-select.css
+   Map: wrapper (icon + native select) -> icon -> select control -> chevron -> states -> --ghost / --currency
+   Language select: compact locale (or currency) switcher for a site header.
+   A native <select> inside a small frame with a leading icon or symbol. The app reacts to "change". */
+
+/* Wrapper: inline frame; the select is stretched over it so the whole pill is clickable. */
+.oc-language-select {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding-inline: 0.625rem 0.5rem;
+  border: 1px solid var(--oc-input);
+  border-radius: 999px;
+  color: var(--oc-foreground);
+  font-size: 0.8rem;
+  transition: border-color var(--oc-transition-fast), background var(--oc-transition-fast);
+}
+
+.oc-language-select:hover { background: var(--oc-surface); }
+
+.oc-language-select:focus-within {
+  border-color: var(--oc-ring);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--oc-ring) 25%, transparent);
+}
+
+/* Leading icon (inline SVG globe) or symbol (€, $). Decorative: aria-hidden="true". */
+.oc-language-select-icon {
+  display: inline-flex;
+  flex: none;
+  inline-size: 1rem;
+  justify-content: center;
+  color: var(--oc-muted-foreground);
+  font-weight: 600;
+}
+
+.oc-language-select-icon svg { inline-size: 1rem; block-size: 1rem; }
+
+/* Native select without its own frame; room on the right for the chevron. */
+.oc-language-select-control {
+  appearance: none;
+  padding: 0.375rem 1.25rem 0.375rem 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  outline: none;
+}
+
+.oc-language-select-control option {
+  background: var(--oc-background);
+  color: var(--oc-foreground);
+}
+
+/* Chevron drawn with two borders (no image, follows currentColor). */
+.oc-language-select::after {
+  content: "";
+  position: absolute;
+  inset-inline-end: 0.7rem;
+  inset-block-start: 50%;
+  inline-size: 0.35rem;
+  block-size: 0.35rem;
+  border-inline-end: 1.5px solid var(--oc-muted-foreground);
+  border-block-end: 1.5px solid var(--oc-muted-foreground);
+  transform: translateY(-70%) rotate(45deg);
+  pointer-events: none;
+}
+
+.oc-language-select:has(.oc-language-select-control:disabled) { opacity: 0.5; cursor: not-allowed; }
+
+/* Ghost: no frame, for dense headers and footers. */
+.oc-language-select--ghost { border-color: transparent; }
+
+/* Currency: the symbol in the icon slot gets the primary color. */
+.oc-language-select--currency .oc-language-select-icon { color: var(--oc-primary); }
+
+/* Menu: the same pill as a <button> that opens an OmniaUI dropdown (popovertarget + .oc-dropdown-menu),
+   for a list of links per language. Room on the right for the chevron. */
+button.oc-language-select {
+  padding-block: 0.375rem;
+  padding-inline-end: 1.6rem;
+  background: transparent;
+  font: inherit;
+  font-size: 0.8rem;
+  cursor: pointer;
+  outline: none;
+}
+button.oc-language-select:hover { background: var(--oc-surface); }

package/dist/parts/forms-number-input.css

@@ -1,95 +1,98 @@
-/* File: packages/ui/src/parts/forms-number-input.css
-   Map: wrapper -> step buttons (- / +) -> number field (native spinners hidden) -> states -> sizes / block
-   Number input: input type="number" between a minus and a plus button.
-   The field works on its own (arrow keys, min/max/step); the buttons call stepDown()/stepUp() (tiny script or wrapper). */
-
-/* Wrapper: one frame around the buttons and the field. */
-.oc-number-input {
-  display: inline-flex;
-  align-items: stretch;
-  border: 1px solid var(--oc-input);
-  border-radius: var(--oc-radius);
-  overflow: hidden;
-  transition: border-color var(--oc-transition-fast), box-shadow var(--oc-transition-fast);
-}
-
-.oc-number-input:focus-within {
-  border-color: var(--oc-ring);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--oc-ring) 25%, transparent);
-}
-
-/* Step buttons: square, muted, with a divider towards the field. */
-.oc-number-input-step {
-  flex: none;
-  inline-size: 2.25rem;
-  padding: 0;
-  border: 0;
-  background: var(--oc-surface);
-  color: var(--oc-muted-foreground);
-  font: inherit;
-  font-size: 1rem;
-  line-height: 1;
-  cursor: pointer;
-  transition: background var(--oc-transition-fast), color var(--oc-transition-fast);
-}
-
-.oc-number-input-step:first-child { border-inline-end: 1px solid var(--oc-input); }
-.oc-number-input-step:last-child { border-inline-start: 1px solid var(--oc-input); }
-
-.oc-number-input-step:hover {
-  background: var(--oc-surface-strong);
-  color: var(--oc-foreground);
-}
-
-.oc-number-input-step:focus-visible {
-  outline: 2px solid var(--oc-ring);
-  outline-offset: -2px;
-}
-
-.oc-number-input-step:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-/* Field: centered digits, no native spinner arrows (the buttons replace them). */
-.oc-number-input-field {
-  inline-size: 4.5rem;
-  min-inline-size: 0;
-  padding: 0.5rem 0.25rem;
-  border: 0;
-  background: transparent;
-  color: var(--oc-foreground);
-  font: inherit;
-  font-size: 0.875rem;
-  font-variant-numeric: tabular-nums;
-  text-align: center;
-  outline: none;
-  appearance: textfield;
-}
-
-.oc-number-input-field::-webkit-inner-spin-button,
-.oc-number-input-field::-webkit-outer-spin-button {
-  appearance: none;
-  margin: 0;
-}
-
-/* Invalid: outside min/max (after user input), aria-invalid or the modifier. */
-.oc-number-input--error,
-.oc-number-input:has([aria-invalid="true"]),
-.oc-number-input:has(.oc-number-input-field:user-invalid) {
-  border-color: var(--oc-destructive);
-}
-
-/* Disabled: dim the whole control. */
-.oc-number-input:has(.oc-number-input-field:disabled) {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* Full width: the field grows, buttons keep their size. */
-.oc-number-input--block { display: flex; }
-.oc-number-input--block .oc-number-input-field { flex: 1; inline-size: auto; }
-
-/* Small size. */
-.oc-number-input--sm .oc-number-input-step { inline-size: 1.75rem; font-size: 0.875rem; }
-.oc-number-input--sm .oc-number-input-field { padding-block: 0.25rem; font-size: 0.8rem; inline-size: 3.5rem; }
+/* File: packages/ui/src/parts/forms-number-input.css
+   Map: wrapper -> step buttons (- / +) -> number field (native spinners hidden) -> states -> sizes / block
+   Number input: input type="number" between a minus and a plus button.
+   The field works on its own (arrow keys, min/max/step); the buttons call stepDown()/stepUp() (tiny script or wrapper). */
+
+/* Wrapper: one frame around the buttons and the field. */
+.oc-number-input {
+  display: inline-flex;
+  align-items: stretch;
+  border: 1px solid var(--oc-input);
+  border-radius: var(--oc-radius);
+  overflow: hidden;
+  transition: border-color var(--oc-transition-fast), box-shadow var(--oc-transition-fast);
+}
+
+.oc-number-input:focus-within {
+  border-color: var(--oc-ring);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--oc-ring) 25%, transparent);
+}
+
+/* Step buttons: square, muted, with a divider towards the field. */
+.oc-number-input-step {
+  flex: none;
+  inline-size: 2.25rem;
+  padding: 0;
+  border: 0;
+  background: var(--oc-surface);
+  color: var(--oc-muted-foreground);
+  font: inherit;
+  font-size: 1rem;
+  line-height: 1;
+  cursor: pointer;
+  transition: background var(--oc-transition-fast), color var(--oc-transition-fast);
+}
+
+.oc-number-input-step:first-child { border-inline-end: 1px solid var(--oc-input); }
+.oc-number-input-step:last-child { border-inline-start: 1px solid var(--oc-input); }
+
+.oc-number-input-step:hover {
+  background: var(--oc-surface-strong);
+  color: var(--oc-foreground);
+}
+
+.oc-number-input-step:focus-visible {
+  outline: 2px solid var(--oc-ring);
+  outline-offset: -2px;
+}
+
+.oc-number-input-step:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Field: centered digits, no native spinner arrows (the buttons replace them). */
+.oc-number-input-field {
+  inline-size: 4.5rem;
+  min-inline-size: 0;
+  padding: 0.5rem 0.25rem;
+  border: 0;
+  background: transparent;
+  color: var(--oc-foreground);
+  font: inherit;
+  font-size: 0.875rem;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  outline: none;
+  appearance: textfield;
+}
+
+.oc-number-input-field::-webkit-inner-spin-button,
+.oc-number-input-field::-webkit-outer-spin-button {
+  appearance: none;
+  margin: 0;
+}
+
+/* Invalid: outside min/max (after user input), aria-invalid or the modifier. */
+.oc-number-input--error,
+.oc-number-input:has([aria-invalid="true"]),
+.oc-number-input:has(.oc-number-input-field:user-invalid) {
+  border-color: var(--oc-destructive);
+}
+
+/* Disabled: dim the whole control. */
+.oc-number-input:has(.oc-number-input-field:disabled) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Inside a grid the control keeps its own width (no empty strip next to the +); --block fills the cell. */
+.oc-number-input { justify-self: start; }
+
+/* Full width: the field grows, buttons keep their size. */
+.oc-number-input--block { display: flex; inline-size: 100%; justify-self: stretch; }
+.oc-number-input--block .oc-number-input-field { flex: 1; inline-size: auto; }
+
+/* Small size. */
+.oc-number-input--sm .oc-number-input-step { inline-size: 1.75rem; font-size: 0.875rem; }
+.oc-number-input--sm .oc-number-input-field { padding-block: 0.25rem; font-size: 0.8rem; inline-size: 3.5rem; }

package/dist/parts/forms-password-requirements.css

@@ -1,55 +1,55 @@
-/* File: packages/ui/src/parts/forms-password-requirements.css
-   Map: list -> rule (icon via ::before) -> met state -> --inline variant
-   Password requirements: a live checklist of password rules under a password field.
-   A rule is "met" with the modifier .oc-password-requirement--met (set by the tiny script or a wrapper).
-   The list uses aria-live="polite" so screen readers hear the changes. */
-
-/* List: compact, no bullets. */
-.oc-password-requirements {
-  display: grid;
-  gap: 0.25rem;
-  margin: 0.5rem 0 0;
-  padding: 0;
-  list-style: none;
-  font-size: 0.8rem;
-}
-
-/* One rule: icon + text. Not met = muted with a cross. */
-.oc-password-requirement {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  color: var(--oc-muted-foreground);
-  transition: color var(--oc-transition-fast);
-}
-
-/* Icon in a small circle (text glyph, no icon font needed). */
-.oc-password-requirement::before {
-  content: "\2715";
-  display: inline-grid;
-  place-items: center;
-  flex: none;
-  inline-size: 1rem;
-  block-size: 1rem;
-  border-radius: 999px;
-  background: var(--oc-surface-strong);
-  font-size: 0.6rem;
-  font-weight: 700;
-  line-height: 1;
-}
-
-/* Met: success color with a check mark. */
-.oc-password-requirement--met { color: var(--oc-success); }
-
-.oc-password-requirement--met::before {
-  content: "\2713";
-  background: var(--oc-success);
-  color: var(--oc-success-foreground);
-}
-
-/* Inline variant: rules side by side, wrapping (short rule texts). */
-.oc-password-requirements--inline {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.25rem 1rem;
-}
+/* File: packages/ui/src/parts/forms-password-requirements.css
+   Map: list -> rule (icon via ::before) -> met state -> --inline variant
+   Password requirements: a live checklist of password rules under a password field.
+   A rule is "met" with the modifier .oc-password-requirement--met (set by the tiny script or a wrapper).
+   The list uses aria-live="polite" so screen readers hear the changes. */
+
+/* List: compact, no bullets. */
+.oc-password-requirements {
+  display: grid;
+  gap: 0.25rem;
+  margin: 0.5rem 0 0;
+  padding: 0;
+  list-style: none;
+  font-size: 0.8rem;
+}
+
+/* One rule: icon + text. Not met = muted with a cross. */
+.oc-password-requirement {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  color: var(--oc-muted-foreground);
+  transition: color var(--oc-transition-fast);
+}
+
+/* Icon in a small circle (text glyph, no icon font needed). */
+.oc-password-requirement::before {
+  content: "\2715";
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  inline-size: 1rem;
+  block-size: 1rem;
+  border-radius: 999px;
+  background: var(--oc-surface-strong);
+  font-size: 0.6rem;
+  font-weight: 700;
+  line-height: 1;
+}
+
+/* Met: success color with a check mark. */
+.oc-password-requirement--met { color: var(--oc-success); }
+
+.oc-password-requirement--met::before {
+  content: "\2713";
+  background: var(--oc-success);
+  color: var(--oc-success-foreground);
+}
+
+/* Inline variant: rules side by side, wrapping (short rule texts). */
+.oc-password-requirements--inline {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 1rem;
+}

package/dist/parts/forms-phone-input.css

@@ -1,85 +1,85 @@
-/* File: packages/ui/src/parts/forms-phone-input.css
-   Map: wrapper (one border around both parts) -> dial-code select -> number input -> states (focus, invalid, disabled) -> sizes
-   Phone input: a country dial code (native <select>) and the national number (input type="tel") in one frame.
-   No JavaScript needed; the React/Vue wrappers only add digit grouping ("485 12 34 56"). */
-
-/* Wrapper: draws the single border, so both controls look like one field. */
-.oc-phone-input {
-  display: flex;
-  align-items: stretch;
-  inline-size: 100%;
-  border: 1px solid var(--oc-input);
-  border-radius: var(--oc-radius);
-  background: transparent;
-  overflow: hidden;
-  transition: border-color var(--oc-transition-fast), box-shadow var(--oc-transition-fast);
-}
-
-/* Focus ring on the whole frame while either part has focus. */
-.oc-phone-input:focus-within {
-  border-color: var(--oc-ring);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--oc-ring) 25%, transparent);
-}
-
-/* Dial code: compact native select, separated by a divider line. */
-.oc-phone-input-dial {
-  flex: none;
-  padding: 0.5rem 0.5rem 0.5rem 0.75rem;
-  border: 0;
-  border-inline-end: 1px solid var(--oc-input);
-  background: var(--oc-surface);
-  color: var(--oc-foreground);
-  font: inherit;
-  font-size: 0.875rem;
-  font-variant-numeric: tabular-nums;
-  cursor: pointer;
-  outline: none;
-}
-
-/* Dark mode: keep the opened option list readable (same as .oc-select option). */
-.oc-phone-input-dial option {
-  background: var(--oc-background);
-  color: var(--oc-foreground);
-}
-
-/* National number: borderless, fills the rest of the frame. */
-.oc-phone-input-number {
-  flex: 1;
-  min-inline-size: 0;
-  padding: 0.5rem 0.75rem;
-  border: 0;
-  background: transparent;
-  color: var(--oc-foreground);
-  font: inherit;
-  font-size: 0.875rem;
-  font-variant-numeric: tabular-nums;
-  letter-spacing: 0.02em;
-  outline: none;
-}
-
-.oc-phone-input-number::placeholder { color: var(--oc-muted-foreground); }
-
-/* Invalid: modifier, aria-invalid on the input, or the browser's own check after user input. */
-.oc-phone-input--error,
-.oc-phone-input:has([aria-invalid="true"]),
-.oc-phone-input:has(.oc-phone-input-number:user-invalid) {
-  border-color: var(--oc-destructive);
-}
-
-.oc-phone-input--error:focus-within,
-.oc-phone-input:has([aria-invalid="true"]):focus-within {
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--oc-destructive) 25%, transparent);
-}
-
-/* Disabled: dim the whole frame when the number input is disabled. */
-.oc-phone-input:has(.oc-phone-input-number:disabled) {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* Small size for toolbars and dense forms. */
-.oc-phone-input--sm .oc-phone-input-dial,
-.oc-phone-input--sm .oc-phone-input-number {
-  padding-block: 0.25rem;
-  font-size: 0.8rem;
-}
+/* File: packages/ui/src/parts/forms-phone-input.css
+   Map: wrapper (one border around both parts) -> dial-code select -> number input -> states (focus, invalid, disabled) -> sizes
+   Phone input: a country dial code (native <select>) and the national number (input type="tel") in one frame.
+   No JavaScript needed; the React/Vue wrappers only add digit grouping ("485 12 34 56"). */
+
+/* Wrapper: draws the single border, so both controls look like one field. */
+.oc-phone-input {
+  display: flex;
+  align-items: stretch;
+  inline-size: 100%;
+  border: 1px solid var(--oc-input);
+  border-radius: var(--oc-radius);
+  background: transparent;
+  overflow: hidden;
+  transition: border-color var(--oc-transition-fast), box-shadow var(--oc-transition-fast);
+}
+
+/* Focus ring on the whole frame while either part has focus. */
+.oc-phone-input:focus-within {
+  border-color: var(--oc-ring);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--oc-ring) 25%, transparent);
+}
+
+/* Dial code: compact native select, separated by a divider line. */
+.oc-phone-input-dial {
+  flex: none;
+  padding: 0.5rem 0.5rem 0.5rem 0.75rem;
+  border: 0;
+  border-inline-end: 1px solid var(--oc-input);
+  background: var(--oc-surface);
+  color: var(--oc-foreground);
+  font: inherit;
+  font-size: 0.875rem;
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+  outline: none;
+}
+
+/* Dark mode: keep the opened option list readable (same as .oc-select option). */
+.oc-phone-input-dial option {
+  background: var(--oc-background);
+  color: var(--oc-foreground);
+}
+
+/* National number: borderless, fills the rest of the frame. */
+.oc-phone-input-number {
+  flex: 1;
+  min-inline-size: 0;
+  padding: 0.5rem 0.75rem;
+  border: 0;
+  background: transparent;
+  color: var(--oc-foreground);
+  font: inherit;
+  font-size: 0.875rem;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.02em;
+  outline: none;
+}
+
+.oc-phone-input-number::placeholder { color: var(--oc-muted-foreground); }
+
+/* Invalid: modifier, aria-invalid on the input, or the browser's own check after user input. */
+.oc-phone-input--error,
+.oc-phone-input:has([aria-invalid="true"]),
+.oc-phone-input:has(.oc-phone-input-number:user-invalid) {
+  border-color: var(--oc-destructive);
+}
+
+.oc-phone-input--error:focus-within,
+.oc-phone-input:has([aria-invalid="true"]):focus-within {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--oc-destructive) 25%, transparent);
+}
+
+/* Disabled: dim the whole frame when the number input is disabled. */
+.oc-phone-input:has(.oc-phone-input-number:disabled) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Small size for toolbars and dense forms. */
+.oc-phone-input--sm .oc-phone-input-dial,
+.oc-phone-input--sm .oc-phone-input-number {
+  padding-block: 0.25rem;
+  font-size: 0.8rem;
+}