@kenlo/sds-design-system 0.9.9

package/components/Input/Input.css

@@ -0,0 +1,547 @@
+/* SDS Input.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/Input/Input.css
+   by scripts/port-css.mjs. Divergences beyond the mechanical rename are noted inline.
+
+   Rules removed with the brand families they targeted:
+     [data-color-scheme="lya"] .sds-input__native
+     [data-color-scheme="lya"] .sds-input:focus-within:not(.sds-input--feedback-success):not(.sds-input--feedback-alert):not(.sds-input--feedback-error)
+ *//* ============================================================
+   SDS Input
+   Height: 56px | Radius: corner-radius-medium (12px default)
+   Floating label pattern
+   ============================================================ */
+
+.sds-input-phone-wrap--hug   { width: fit-content; min-width: 160px; }
+.sds-input-phone-wrap--fill  { width: 100%; }
+.sds-input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  width: 100%;
+}
+/* ── Container ── */
+.sds-input {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  height: 56px;
+  min-height: 56px;
+  padding: 0 var(--spacing-4);
+  border: 1px solid var(--border-interactive-color);
+  border-radius: var(--radius-md);
+  background-color: var(--component-bg-color);
+  transition: border-color 120ms ease, box-shadow 120ms ease;
+  cursor: text;
+  box-sizing: border-box;
+}
+.sds-input:hover:not(:focus-within):not(.sds-input--disabled):not(.sds-input--loading) {
+  border-color: var(--color-primary-50-solid);
+}
+.sds-input:focus-within {
+  border-color: var(--color-primary-50-solid);
+  box-shadow: var(--focus-ring);
+}
+/* ── Feedback states ── */
+.sds-input--feedback-success {
+  border-color: var(--color-success-50);
+}
+.sds-input--feedback-success:focus-within {
+  border-color: var(--color-success-50);
+  box-shadow: var(--focus-ring);
+}
+.sds-input--feedback-alert {
+  border-color: var(--color-alert-50);
+}
+.sds-input--feedback-alert:focus-within {
+  border-color: var(--color-alert-50);
+  box-shadow: var(--focus-ring);
+}
+.sds-input--feedback-error {
+  border-color: var(--color-error-50);
+}
+.sds-input--feedback-error:focus-within {
+  border-color: var(--color-error-50);
+  box-shadow: var(--focus-ring);
+}
+/* ── Loading ── */
+.sds-input--loading {
+  cursor: wait;
+}
+.sds-input--loading > * { pointer-events: none; }
+/* ── Disabled ── */
+.sds-input-wrapper--disabled {
+  cursor: not-allowed;              /* wrapper is the mouse target → shows the cursor */
+}
+.sds-input--disabled > * {
+  pointer-events: none;            /* blocks the children; the box remains the mouse target and shows the cursor */
+}
+.sds-input--disabled {
+  background-color: var(--color-neutral-20);
+  border-color: var(--border-static-color);
+  cursor: not-allowed;
+}
+.sds-input--disabled .sds-input__native {
+  color: var(--color-neutral-40);
+  -webkit-text-fill-color: var(--color-neutral-40);
+}
+.sds-input--disabled .sds-input__icon,
+.sds-input--disabled .sds-input__password-toggle,
+.sds-input--disabled .sds-input__spinner-btn {
+  color: var(--color-neutral-40);
+}
+/* ── Field: wrapper for the floating label + native input ── */
+.sds-input__field {
+  flex: 1;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 52px;
+  min-width: 0;
+}
+/* Invisible spacer that mirrors the floating label's text so hug mode
+   grows the input when the label is wider than the native field */
+.sds-input__field::before {
+  content: attr(data-label);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-body-md);
+  font-weight: var(--font-weight-regular);
+  white-space: nowrap;
+  display: block;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+  pointer-events: none;
+}
+/* ── Floating label ── */
+.sds-input__label {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  line-height: 1;
+  pointer-events: none;
+  transform-origin: top left;
+  transition:
+    top 120ms ease,
+    font-size 120ms ease,
+    color 120ms ease,
+    transform 120ms ease;
+  white-space: nowrap;
+}
+.sds-input__field .sds-input__label {
+  color: var(--color-neutral-50);
+}
+/* Floating: filled or focused */
+.sds-input--filled .sds-input__label,
+.sds-input:focus-within .sds-input__label {
+  top: var(--spacing-2);
+  transform: none;
+  font-size: var(--font-size-label-sm);
+  line-height: var(--lh-label-sm);
+}
+/* Label color in feedback states */
+.sds-input--feedback-success .sds-input__label { color: var(--color-success-50); }
+.sds-input--feedback-alert   .sds-input__label { color: var(--color-alert-50); }
+.sds-input--feedback-error   .sds-input__label { color: var(--color-error-50); }
+.sds-input--disabled .sds-input__label {
+  color: var(--color-neutral-40);
+}
+/* Required asterisk */
+.sds-input__label--required::after {
+  content: ' *';
+  color: var(--color-error-50);
+}
+/* ── Native input ── */
+.sds-input__native {
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-body-md);       /* 16px */
+  font-weight: var(--font-weight-regular);
+  color: var(--body-color);
+  width: 100%;
+  padding-top: var(--spacing-5);    /* space for the floating label */
+  padding-bottom: var(--spacing-1);
+  line-height: 1;
+  caret-color: var(--color-primary-50-solid);
+}
+.sds-input__native::placeholder {
+  color: transparent;   /* hidden at rest — the label acts as the placeholder */
+}
+.sds-input__native:focus::placeholder {
+  color: var(--placeholder-color);
+}
+/* Hides the browser's native spinner on type="number" — always */
+.sds-input__native[type="number"]::-webkit-inner-spin-button,
+.sds-input__native[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.sds-input__native[type="number"] {
+  -moz-appearance: textfield;
+}
+/* ── Spinner custom (type="number") ── */
+.sds-input__spinner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  gap: 0;
+  width: 32px;
+  height: 100%;
+  border-left: 1px solid var(--border-static-color);
+  margin-right: calc(-1 * var(--spacing-4));
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms ease;
+}
+.sds-input:focus-within .sds-input__spinner {
+  opacity: 1;
+  pointer-events: auto;
+}
+.sds-input__spinner-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 22px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--body-color);
+  cursor: pointer;
+  border-radius: var(--radius-xs);
+  transition: background-color 120ms ease;
+  outline: none;
+}
+.sds-input__spinner-btn:hover:not(:disabled) {
+  background-color: var(--color-opacity-05);
+}
+.sds-input__spinner-btn:active:not(:disabled) {
+  background-color: var(--color-opacity-10);
+}
+.sds-input__spinner-btn:focus-visible {
+  box-shadow: var(--focus-ring);
+}
+.sds-input__spinner-btn:disabled {
+  cursor: not-allowed;
+}
+/* ── Icons ── */
+.sds-input__icon {
+  display: inline-flex;
+  align-items: center;
+  font-size: 24px;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+}
+/* ── Clickable right icon ── */
+.sds-input__icon--right--clickable {
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  transition: background-color 120ms ease;
+  width: auto;
+  height: auto;
+  padding: var(--spacing-0-5);
+}
+.sds-input__icon--right--clickable:hover  { background-color: var(--color-opacity-05); }
+.sds-input__icon--right--clickable:active { background-color: var(--color-opacity-10); }
+/* ── Password toggle ── */
+.sds-input__password-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--body-color);
+  cursor: pointer;
+  flex-shrink: 0;
+  border-radius: var(--radius-xs);
+  outline: none;
+}
+.sds-input__password-toggle:focus-visible {
+  box-shadow: var(--focus-ring);
+}
+/* ── International phone variant ── */
+.sds-input--phone {
+  padding-left: 0;
+  overflow: hidden;
+}
+/* Flush against the left edge.
+
+   The field pads itself 16px on each side, and the country selector is the one thing that
+   should not sit inside that padding: it is a control with a ground of its own, and it
+   already runs the full height of the field. Left 16px in, it read as a chip floating in
+   the field rather than as the field's left end. Rafael, looking at it: it should be stuck
+   to the left corner the same way it is stuck to the top and the bottom.
+
+   A negative margin cancels the field's padding rather than removing it, so nothing else
+   moves — the text after the selector keeps the gap it had. And the left corners take the
+   field's own radius, or a square block would push out through the rounded corner. */
+/* Flush against the left edge.
+
+   The field pads itself 16px on each side, and the country selector is the one thing that
+   should not sit inside that padding: it is a control with a ground of its own, and it
+   already runs the full height of the field. Left 16px in, it read as a chip floating in
+   the field rather than as the field's left end. Rafael, looking at it: it should be stuck
+   to the left corner the same way it is stuck to the top and the bottom.
+
+   A negative margin cancels the field's padding rather than removing it, so nothing else
+   moves — the text after the selector keeps the gap it had. And the left corners take the
+   field's own radius, or a square block would push out through the rounded corner. */
+.sds-input__country {
+  display: flex;
+  align-items: center;
+  /* The selector IS a menu, so `.sds-menu`'s own `flex-direction: column` lands on this
+     same element — and Menu.css loads after this file, so it wins on order. Centring the
+     main axis is what actually keeps the flag and the DDI in the middle of the field;
+     before this they sat flush against the top. */
+  justify-content: center;
+  padding: 0 var(--spacing-3);
+  margin-left: calc(var(--spacing-4) * -1);
+  border-top-left-radius: inherit;
+  border-bottom-left-radius: inherit;
+  /* 100% of the field's CONTENT box: 56px less the 1px border on each side. A fixed 56px
+     here overflowed by exactly those two pixels and painted over the field's own stroke. */
+  height: 100%;
+  background-color: var(--color-neutral-10);
+  border: none;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background-color 120ms ease;
+}
+.sds-input__country:hover:not(:disabled) {
+  background-color: var(--color-neutral-20);
+}
+.sds-input__country:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-inset);
+}
+.sds-input__country-flag {
+  display: block;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+/* The affordance that says the flag and the dial code are a choice and not a decoration.
+   `sm` is the 16px icon token — the same chevron, at the same size, that Menu's own
+   trigger button and Select draw. It turns over when the list is open; the custom trigger
+   carries no open class, but `aria-expanded` already says so and costs nothing. */
+.sds-input__country-chevron {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--color-neutral-60);
+  transition: transform 120ms ease;
+}
+[aria-expanded="true"] .sds-input__country-chevron {
+  transform: rotate(180deg);
+}
+.sds-input--phone .sds-input__field {
+  /* margin-left instead of padding-left: moves the absolute label + input together,
+     keeping the two aligned */
+  margin-left: var(--spacing-3);
+}
+/* ── Hint / helper message ── */
+.sds-input__hint-row {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  column-gap: var(--spacing-2);
+  align-items: start;
+  margin-top: var(--spacing-1);
+  contain: inline-size;
+}
+.sds-input__hint {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-label-sm);       /* 12px */
+  line-height: 12px;
+  font-weight: var(--font-weight-regular);
+  margin-top: var(--spacing-1);
+  padding-left: var(--spacing-4);        /* aligns with the input's text */
+  display: block;
+}
+.sds-input__hint-row .sds-input__hint {
+  margin-top: 0;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  min-width: 0;
+}
+.sds-input__count {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-label-sm);
+  line-height: 12px;
+  font-weight: var(--font-weight-regular);
+  color: var(--label-color);
+  padding-right: var(--spacing-4);
+  grid-column: 2;
+  grid-row: 1;
+}
+/* Neutral 50 in light, neutral 40 in dark — the token carries both, so the hint does not
+   need a rule per theme. */
+.sds-input__hint--none    { color: var(--color-neutral-50-40); }
+.sds-input__hint--success { color: var(--color-success-50); }
+.sds-input__hint--alert   { color: var(--color-alert-50); }
+.sds-input__hint--error   { color: var(--color-error-50); }
+.sds-input__hint--disabled { color: var(--color-neutral-40); }
+/* ── Textbox (textarea) variant ── */
+.sds-input--textbox {
+  height: auto;
+  min-height: var(--sds-textarea-min-height, 114px);
+  align-items: flex-start;
+  resize: vertical;
+  overflow: hidden;
+}
+/* Field: fixed padding-top — guarantees constant height regardless of state */
+.sds-input--textbox .sds-input__field {
+  min-height: 0;
+  padding-top: var(--spacing-7);
+  padding-bottom: var(--spacing-3);
+  align-self: stretch;
+}
+.sds-input--textbox .sds-input__label {
+  top: 26px;
+  transform: translateY(-50%);
+  line-height: 1;
+}
+/* Label: floated = small at the top */
+.sds-input--filled.sds-input--textbox .sds-input__label,
+.sds-input--textbox:focus-within .sds-input__label {
+  top: var(--spacing-2);
+  font-size: var(--font-size-label-sm);
+  line-height: var(--lh-label-sm);
+}
+.sds-input__native--textarea {
+  padding-top: 0;
+  padding-bottom: 0;
+  resize: none;
+  flex: 1;
+  line-height: var(--lh-body-md);
+  overflow-y: auto;
+  width: 100%;
+}
+/* ── Dark mode ── */
+[data-theme="dark"] .sds-input__country {
+  background-color: var(--color-neutral-20);
+}
+/* ── Phone country dropdown ── */
+.sds-input-phone-wrap {
+  position: relative;
+}
+.sds-phone-dropdown {
+  position: absolute;
+  top: calc(100% + var(--spacing-1));
+  left: 0;
+  z-index: var(--z-floating);
+  background: var(--component-bg-color);
+  border: 1px solid var(--border-static-color);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-drop-md);
+  min-width: 220px;
+  max-height: 320px;
+  overflow-y: auto;
+  padding: var(--spacing-1);
+}
+.sds-input-phone-wrap--hug  .sds-phone-dropdown { min-width: 100%; }
+.sds-input-phone-wrap--fill .sds-phone-dropdown { width: 100%; }
+.sds-phone-dropdown__item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  width: 100%;
+  padding: var(--spacing-2) var(--spacing-4);
+  border: none;
+  background: transparent;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  text-align: left;
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-body-md);
+  font-weight: var(--font-weight-regular);
+  color: var(--color-neutral-80);
+  transition: background 120ms ease;
+}
+.sds-phone-dropdown__item:hover {
+  background: var(--color-neutral-10);
+  color: var(--color-neutral-10-on);
+}
+.sds-phone-dropdown__item:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+.sds-phone-dropdown__item--active {
+  background: var(--color-primary-10);
+  color: var(--color-primary-60-solid);
+  font-weight: var(--font-weight-medium);
+}
+.sds-phone-dropdown__flag { display: block; width: 20px; height: 15px; border-radius: 2px; flex-shrink: 0; }
+.sds-phone-dropdown__name { flex: 1; }
+.sds-phone-dropdown__ddi {
+  flex-shrink: 0;
+}
+[data-theme="dark"] .sds-phone-dropdown {
+  background: var(--color-neutral-10);
+  border-color: var(--border-interactive-color);
+}
+
+/* ── Width box ─────────────────────────────────────────────────────────────────
+   KDLS named this wrapper .kdls-input-phone-wrap, which is what it was built for and not
+   what it does: it owns the field's width, phone or not. Renamed, with the original rules
+   kept above so nothing else has to move. */
+.sds-input-box { position: relative; }
+.sds-input-box--hug { width: fit-content; min-width: 160px; }
+.sds-input-box--fill { width: 100%; }
+
+/* ── The country selector on a tel-inter field ────────────────────────────────
+   It sits where the left icon would, because it is the left icon there: a flag and a
+   dial code, and the whole pair opens the list. */
+.sds-input__country .sds-menu__trigger-custom {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  /* No padding of its own: the selector around it already pads 12px on each side, and an
+     extra 8px on the right left the chevron sitting short of the edge. */
+  border-radius: var(--radius-xs);
+  cursor: pointer;
+}
+
+.sds-input__country .sds-menu__trigger-custom:focus-visible {
+  /* Menu paints this trigger's ring as an `outline`; here it is a box-shadow, and without
+     clearing the outline the country selector wore both rings at once. */
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* Seven rows and a half.
+   Fifteen countries is a panel taller than the field it hangs off, and a list that runs
+   past the fold reads as the whole list — the eight below it are never looked for. Seven
+   whole rows plus half of the eighth is the cap: enough to choose from without scrolling
+   in the common case, and the cut-off row is what says there is more. The cap is on the
+   body rather than the panel so the search box above it stays put while the rows move. */
+.sds-input__country .sds-menu__panel-body {
+  max-height: calc(7.5 * var(--sds-menu-item-height));
+}
+/* Only a minimum width — the padding is the menu header's, and so is the full width. */
+.sds-input__country-search {
+  min-width: 240px;
+}
+.sds-input__country-flag {
+  font-size: 18px;
+  line-height: 1;
+}
+
+.sds-input__country-ddi {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-body-md);
+  color: var(--body-color);
+  white-space: nowrap;
+}
+
+.sds-input--disabled .sds-input__country-ddi {
+  color: var(--color-neutral-40);
+}

package/components/Input/input-countries.js

@@ -0,0 +1,109 @@
+/**
+ * The countries a `tel-inter` field can be set to, and their flags.
+ *
+ * Ported from kdls-design-system v2.5.1 (0f3edf8) components/Input/Input.tsx
+ * (PHONE_COUNTRIES). Same fifteen, same order — Brazil first, because that is who this
+ * is for.
+ *
+ * Divergence, and the reason this file exists at all: KDLS draws each flag as
+ * `<img src="https://flagcdn.com/20x15/br.png">`. That is a request to a third party for
+ * every visitor who opens a form, which hands that third party the visitor's IP address
+ * and the page they were on. A phone field is not worth that, and a design system should
+ * not make the decision on a consumer's behalf without them noticing.
+ *
+ * The flag here is an emoji, built from the country code itself: the two letters shifted
+ * into the Unicode regional-indicator block make the flag, so there is nothing to fetch,
+ * nothing to bundle, and nothing to go stale.
+ *
+ * Known limit: Windows ships no flag glyphs, so a Windows reader sees the two letters
+ * instead — "BR" rather than 🇧🇷. That is legible and correct, which the fetched image is
+ * not when the network is slow or the CDN is blocked. Shipping fifteen SVGs is the other
+ * way and is open if the letters turn out to bother anyone.
+ */
+
+import { fold } from '../../foundations/text.js';
+
+/** `br` → 🇧🇷. Two ASCII letters, shifted into the regional-indicator block. */
+export function flagOf(code) {
+  return [...code.toUpperCase()]
+    .map((letter) => String.fromCodePoint(0x1f1e6 + letter.charCodeAt(0) - 65))
+    .join('');
+}
+
+export const PHONE_COUNTRIES = [
+  { code: 'br', ddi: '+55', name: 'Brasil' },
+  { code: 'us', ddi: '+1', name: 'Estados Unidos' },
+  { code: 'ar', ddi: '+54', name: 'Argentina' },
+  { code: 'mx', ddi: '+52', name: 'México' },
+  { code: 'cl', ddi: '+56', name: 'Chile' },
+  { code: 'co', ddi: '+57', name: 'Colômbia' },
+  { code: 'pt', ddi: '+351', name: 'Portugal' },
+  { code: 'gb', ddi: '+44', name: 'Reino Unido' },
+  { code: 'de', ddi: '+49', name: 'Alemanha' },
+  { code: 'fr', ddi: '+33', name: 'França' },
+  { code: 'es', ddi: '+34', name: 'Espanha' },
+  { code: 'it', ddi: '+39', name: 'Itália' },
+  { code: 'jp', ddi: '+81', name: 'Japão' },
+  { code: 'cn', ddi: '+86', name: 'China' },
+  { code: 'in', ddi: '+91', name: 'Índia' },
+];
+
+export const PHONE_COUNTRY_CODES = PHONE_COUNTRIES.map((country) => country.code);
+
+/**
+ * The countries a search box's text should turn up.
+ *
+ * Three ways in, because there are three ways someone knows a country here: the name they
+ * would say out loud, the dial code they are copying off a business card, and the two
+ * letters they know from a domain or a flag. "55", "+55", "br" and "brasil" all find
+ * Brazil; an empty box finds everything.
+ */
+export function searchCountries(query) {
+  const needle = fold(query).replace(/^\+/, '');
+  if (!needle) return PHONE_COUNTRIES;
+  return PHONE_COUNTRIES.filter((country) =>
+    fold(country.name).includes(needle)
+    || country.ddi.replace('+', '').startsWith(needle)
+    || country.code.startsWith(needle));
+}
+
+export function countryOf(code) {
+  return PHONE_COUNTRIES.find((country) => country.code === code) ?? PHONE_COUNTRIES[0];
+}
+
+export function assertCountry(code) {
+  if (code !== undefined && !PHONE_COUNTRY_CODES.includes(code)) {
+    throw new Error(
+      `Unknown phone country: "${code}". Allowed: ${PHONE_COUNTRY_CODES.join(', ')}`,
+    );
+  }
+  return code;
+}
+
+/**
+ * The national number, masked the way that country writes it.
+ *
+ * Brazil is the only one with a mask of its own here, which is what KDLS does too: the
+ * rest are grouped in a way that reads as a phone number without claiming to know the
+ * country's real format. A wrong mask is worse than none — it refuses digits the reader
+ * is holding in their hand.
+ */
+export function maskNational(digits, code) {
+  const only = digits.replace(/\D/g, '');
+
+  if (code === 'br') {
+    // (11) 91234-5678 and (11) 1234-5678: the mobile ninth digit moves the split.
+    const trimmed = only.slice(0, 11);
+    if (trimmed.length <= 2) return trimmed.length ? `(${trimmed}` : '';
+    const area = trimmed.slice(0, 2);
+    const rest = trimmed.slice(2);
+    if (rest.length <= 4) return `(${area}) ${rest}`;
+    const split = rest.length > 8 ? 5 : 4;
+    return `(${area}) ${rest.slice(0, split)}-${rest.slice(split)}`;
+  }
+
+  // Everywhere else: groups of three, then four, which reads as a number without
+  // pretending to be that country's own convention.
+  const trimmed = only.slice(0, 15);
+  return trimmed.replace(/(\d{3})(?=\d)/g, '$1 ').trim();
+}