@olenbetong/appframe-ds 1.7.1 → 1.7.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @olenbetong/appframe-ds
 
+## 1.7.2
+
+### Patch Changes
+
+- c3e56aa: `InputAdornments` is as tall as a `Textfield` or `Combobox` beside it: the input and any Designsystemet button inside it now fit within the control's height instead of a full-size button making it taller. Both `InputAdornments` and `Combobox`/`Autocomplete` now start their text where a `Textfield` does, and `InputAdornments` uses a `Textfield`'s font size and the `Combobox` its placeholder colour, so the three line up side by side.
+
 ## 1.7.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-ds",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "description": "Components that bind Designsystemet components to Appframe data objects",
   "type": "module",
   "types": "./es/index.d.ts",

package/src/autocomplete/Autocomplete.css

@@ -1,253 +1,260 @@
-.ObAutocomplete-root {
-	--obAutocomplete-padding: 0.25rem;
-	--obAutocomplete-gap: 0.25rem;
-
-	display: inline-grid;
-}
-
-/*
- * The root is not a `.ds-field`, so it has to space its label, description,
- * control and validation message itself. Mirrors `.ds-field > * + *`, including
- * the description sitting tight under the label.
- */
-.ObAutocomplete-root > * + * {
-	margin-block-start: var(--ds-size-2);
-}
-
-.ObAutocomplete-root > [data-field="description"] {
-	margin-block-start: 0;
-}
-
-.ObAutocomplete-root[data-full-width="true"] {
-	display: grid;
-	inline-size: 100%;
-}
-
-/*
- * Font size is deliberately never set: `ds-input` inherits its font size when a
- * `data-size` attribute is present, so referencing `--ds-font-size-*` here — which
- * `data-size` rescales — would render the text smaller than a `Textfield` or
- * `Select` of the same size. Only the padding varies per size, and only for the
- * sizes Designsystemet components come in (sm, md, lg; xs and xl are typography-only).
- */
-.ObAutocomplete-root[data-size="sm"] {
-	--obAutocomplete-padding: 0.25rem;
-}
-
-.ObAutocomplete-root[data-size="md"] {
-	--obAutocomplete-padding: 0.25rem;
-}
-
-.ObAutocomplete-root[data-size="lg"] {
-	--obAutocomplete-padding: 0.375rem;
-}
-
-/*
- * The control is the visual input: it owns the border, background, hover and
- * focus styling, so the chips, the bare input and the buttons read as a single
- * control. Mirrors how Designsystemet's Suggestion renders selected chips
- * above the input.
- */
-.ObAutocomplete-control {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	box-sizing: border-box;
-	gap: var(--obAutocomplete-gap);
-	padding: var(--obAutocomplete-padding);
-	inline-size: 100%;
-	/* Matches `--dsc-input-size`, so the control lines up with a Textfield. */
-	min-block-size: var(--ds-size-12);
-	color: var(--ds-color-neutral-text-default);
-	background-color: var(--ds-color-neutral-surface-default);
-	border: var(--ds-border-width-default) solid var(--ds-color-neutral-border-default);
-	border-radius: var(--ds-border-radius-md);
-}
-
-.ObAutocomplete-control:hover:not(:focus-within) {
-	border-color: var(--ds-color-neutral-border-strong);
-}
-
-.ObAutocomplete-control:has(.ObAutocomplete-input:focus-visible) {
-	box-shadow: var(--dsc-focus-boxShadow);
-	outline: var(--dsc-focus-outline);
-	outline-offset: var(--ds-border-width-focus);
-}
-
-.ObAutocomplete-control[data-invalid="true"] {
-	border-color: var(--ds-color-danger-border-default);
-}
-
-.ObAutocomplete-control[data-disabled="true"] {
-	cursor: not-allowed;
-	opacity: var(--ds-opacity-disabled);
-}
-
-.ObAutocomplete-chips {
-	display: flex;
-	flex-wrap: wrap;
-	gap: var(--obAutocomplete-gap);
-	padding: var(--obAutocomplete-padding);
-	padding-block-end: 0;
-}
-
-.ObAutocomplete-inputGroup {
-	display: flex;
-	align-items: center;
-	gap: var(--obAutocomplete-gap);
-	min-inline-size: 0;
-}
-
-.ObAutocomplete-input {
-	flex: 1;
-	min-inline-size: 0;
-	padding: var(--ds-size-1);
-	font: inherit;
-	color: inherit;
-	background: transparent;
-	border: none;
-	outline: none;
-}
-
-.ObAutocomplete-input:disabled {
-	cursor: not-allowed;
-}
-
-.ObAutocomplete-button {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	flex: none;
-	padding: var(--ds-size-1);
-	color: inherit;
-	background: transparent;
-	border: none;
-	border-radius: var(--ds-border-radius-sm);
-	cursor: pointer;
-}
-
-.ObAutocomplete-button:hover:not(:disabled) {
-	background-color: var(--ds-color-neutral-surface-hover);
-}
-
-.ObAutocomplete-button:disabled {
-	cursor: not-allowed;
-}
-
-.ObAutocomplete-button[data-visible="false"] {
-	display: none;
-}
-
-.ObAutocomplete-trigger[data-popup-open] svg {
-	rotate: 180deg;
-}
-
-.ObAutocomplete-spinner {
-	flex: none;
-	display: inline-flex;
-	align-items: center;
-	padding-inline: var(--ds-size-1);
-}
-
-.ObAutocomplete-positioner {
-	z-index: 1500;
-	/* Base UI renders the positioner even while closed */
-	outline: none;
-}
-
-.ObAutocomplete-popup {
-	box-sizing: border-box;
-	inline-size: var(--anchor-width);
-	max-block-size: min(24rem, var(--available-height));
-	overflow-y: auto;
-	overscroll-behavior: contain;
-	padding: var(--ds-size-1);
-	color: var(--ds-color-neutral-text-default);
-	background-color: var(--ds-color-neutral-surface-default);
-	border: var(--ds-border-width-default) solid var(--ds-color-neutral-border-subtle);
-	border-radius: var(--ds-border-radius-md);
-	box-shadow: var(--ds-shadow-md);
-	transform-origin: var(--transform-origin);
-	transition:
-		opacity 0.12s ease-out,
-		scale 0.12s ease-out;
-}
-
-.ObAutocomplete-popup[data-starting-style],
-.ObAutocomplete-popup[data-ending-style] {
-	opacity: 0;
-	scale: 0.98;
-}
-
-.ObAutocomplete-list {
-	display: flex;
-	flex-direction: column;
-}
-
-.ObAutocomplete-item {
-	display: flex;
-	align-items: center;
-	gap: var(--ds-size-2);
-	padding: var(--ds-size-2);
-	border-radius: var(--ds-border-radius-sm);
-	cursor: default;
-	user-select: none;
-	scroll-margin-block: var(--ds-size-1);
-}
-
-/*
- * The `accent` colour set does not exist in every Designsystemet theme, and the
- * contextual `--ds-color-*` aliases of the 1.13 token build are gone since 1.21,
- * so the option states use the neutral set explicitly.
- */
-.ObAutocomplete-item[data-highlighted] {
-	color: var(--ds-color-neutral-text-default);
-	background-color: var(--ds-color-neutral-surface-hover);
-}
-
-.ObAutocomplete-item[data-selected] {
-	font-weight: var(--ds-font-weight-medium);
-	color: var(--ds-color-neutral-text-default);
-	background-color: var(--ds-color-neutral-surface-tinted);
-}
-
-.ObAutocomplete-item[data-selected][data-highlighted] {
-	background-color: var(--ds-color-neutral-surface-active);
-}
-
-.ObAutocomplete-item[data-disabled] {
-	cursor: not-allowed;
-	opacity: var(--ds-opacity-disabled);
-}
-
-/*
- * The option's content. It is a flex row rather than the inline box it looks like, because
- * `renderOption` is normally an icon or an avatar beside a block of text — and a block child in an
- * inline parent drops onto its own line, stacking the two instead of setting them side by side.
- */
-.ObAutocomplete-itemContent {
-	display: flex;
-	align-items: center;
-	gap: var(--ds-size-2);
-	flex: 1;
-	min-inline-size: 0;
-}
-
-.ObAutocomplete-itemIndicator {
-	display: inline-flex;
-	flex: none;
-	inline-size: 1em;
-}
-
-.ObAutocomplete-groupLabel {
-	padding: var(--ds-size-2);
-	font-size: var(--ds-font-size-1);
-	font-weight: var(--ds-font-weight-semibold);
-	color: var(--ds-color-neutral-text-subtle);
-	text-transform: uppercase;
-}
-
-.ObAutocomplete-empty:not(:empty) {
-	padding: var(--ds-size-2);
-	color: var(--ds-color-neutral-text-subtle);
-}
+.ObAutocomplete-root {
+	--obAutocomplete-padding: 0.25rem;
+	--obAutocomplete-gap: 0.25rem;
+
+	display: inline-grid;
+}
+
+/*
+ * The root is not a `.ds-field`, so it has to space its label, description,
+ * control and validation message itself. Mirrors `.ds-field > * + *`, including
+ * the description sitting tight under the label.
+ */
+.ObAutocomplete-root > * + * {
+	margin-block-start: var(--ds-size-2);
+}
+
+.ObAutocomplete-root > [data-field="description"] {
+	margin-block-start: 0;
+}
+
+.ObAutocomplete-root[data-full-width="true"] {
+	display: grid;
+	inline-size: 100%;
+}
+
+/*
+ * Font size is deliberately never set: `ds-input` inherits its font size when a
+ * `data-size` attribute is present, so referencing `--ds-font-size-*` here — which
+ * `data-size` rescales — would render the text smaller than a `Textfield` or
+ * `Select` of the same size. Only the padding varies per size, and only for the
+ * sizes Designsystemet components come in (sm, md, lg; xs and xl are typography-only).
+ */
+.ObAutocomplete-root[data-size="sm"] {
+	--obAutocomplete-padding: 0.25rem;
+}
+
+.ObAutocomplete-root[data-size="md"] {
+	--obAutocomplete-padding: 0.25rem;
+}
+
+.ObAutocomplete-root[data-size="lg"] {
+	--obAutocomplete-padding: 0.375rem;
+}
+
+/*
+ * The control is the visual input: it owns the border, background, hover and
+ * focus styling, so the chips, the bare input and the buttons read as a single
+ * control. Mirrors how Designsystemet's Suggestion renders selected chips
+ * above the input.
+ */
+.ObAutocomplete-control {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	box-sizing: border-box;
+	gap: var(--obAutocomplete-gap);
+	padding: var(--obAutocomplete-padding);
+	inline-size: 100%;
+	/* Matches `--dsc-input-size`, so the control lines up with a Textfield. */
+	min-block-size: var(--ds-size-12);
+	color: var(--ds-color-neutral-text-default);
+	background-color: var(--ds-color-neutral-surface-default);
+	border: var(--ds-border-width-default) solid var(--ds-color-neutral-border-default);
+	border-radius: var(--ds-border-radius-md);
+}
+
+.ObAutocomplete-control:hover:not(:focus-within) {
+	border-color: var(--ds-color-neutral-border-strong);
+}
+
+.ObAutocomplete-control:has(.ObAutocomplete-input:focus-visible) {
+	box-shadow: var(--dsc-focus-boxShadow);
+	outline: var(--dsc-focus-outline);
+	outline-offset: var(--ds-border-width-focus);
+}
+
+.ObAutocomplete-control[data-invalid="true"] {
+	border-color: var(--ds-color-danger-border-default);
+}
+
+.ObAutocomplete-control[data-disabled="true"] {
+	cursor: not-allowed;
+	opacity: var(--ds-opacity-disabled);
+}
+
+.ObAutocomplete-chips {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--obAutocomplete-gap);
+	padding: var(--obAutocomplete-padding);
+	padding-block-end: 0;
+}
+
+.ObAutocomplete-inputGroup {
+	display: flex;
+	align-items: center;
+	gap: var(--obAutocomplete-gap);
+	min-inline-size: 0;
+}
+
+.ObAutocomplete-input {
+	flex: 1;
+	min-inline-size: 0;
+	padding: var(--ds-size-1);
+	/* The text starts where a Textfield's does (its inline padding, inside the control's own). */
+	padding-inline-start: calc(var(--ds-size-3) - var(--obAutocomplete-padding));
+	font: inherit;
+	color: inherit;
+	background: transparent;
+	border: none;
+	outline: none;
+}
+
+/* Designsystemet's input placeholder colour, rather than the browser default grey. */
+.ObAutocomplete-input::placeholder {
+	color: color-mix(in srgb, var(--ds-color-neutral-text-default), transparent 30%);
+}
+
+.ObAutocomplete-input:disabled {
+	cursor: not-allowed;
+}
+
+.ObAutocomplete-button {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	flex: none;
+	padding: var(--ds-size-1);
+	color: inherit;
+	background: transparent;
+	border: none;
+	border-radius: var(--ds-border-radius-sm);
+	cursor: pointer;
+}
+
+.ObAutocomplete-button:hover:not(:disabled) {
+	background-color: var(--ds-color-neutral-surface-hover);
+}
+
+.ObAutocomplete-button:disabled {
+	cursor: not-allowed;
+}
+
+.ObAutocomplete-button[data-visible="false"] {
+	display: none;
+}
+
+.ObAutocomplete-trigger[data-popup-open] svg {
+	rotate: 180deg;
+}
+
+.ObAutocomplete-spinner {
+	flex: none;
+	display: inline-flex;
+	align-items: center;
+	padding-inline: var(--ds-size-1);
+}
+
+.ObAutocomplete-positioner {
+	z-index: 1500;
+	/* Base UI renders the positioner even while closed */
+	outline: none;
+}
+
+.ObAutocomplete-popup {
+	box-sizing: border-box;
+	inline-size: var(--anchor-width);
+	max-block-size: min(24rem, var(--available-height));
+	overflow-y: auto;
+	overscroll-behavior: contain;
+	padding: var(--ds-size-1);
+	color: var(--ds-color-neutral-text-default);
+	background-color: var(--ds-color-neutral-surface-default);
+	border: var(--ds-border-width-default) solid var(--ds-color-neutral-border-subtle);
+	border-radius: var(--ds-border-radius-md);
+	box-shadow: var(--ds-shadow-md);
+	transform-origin: var(--transform-origin);
+	transition:
+		opacity 0.12s ease-out,
+		scale 0.12s ease-out;
+}
+
+.ObAutocomplete-popup[data-starting-style],
+.ObAutocomplete-popup[data-ending-style] {
+	opacity: 0;
+	scale: 0.98;
+}
+
+.ObAutocomplete-list {
+	display: flex;
+	flex-direction: column;
+}
+
+.ObAutocomplete-item {
+	display: flex;
+	align-items: center;
+	gap: var(--ds-size-2);
+	padding: var(--ds-size-2);
+	border-radius: var(--ds-border-radius-sm);
+	cursor: default;
+	user-select: none;
+	scroll-margin-block: var(--ds-size-1);
+}
+
+/*
+ * The `accent` colour set does not exist in every Designsystemet theme, and the
+ * contextual `--ds-color-*` aliases of the 1.13 token build are gone since 1.21,
+ * so the option states use the neutral set explicitly.
+ */
+.ObAutocomplete-item[data-highlighted] {
+	color: var(--ds-color-neutral-text-default);
+	background-color: var(--ds-color-neutral-surface-hover);
+}
+
+.ObAutocomplete-item[data-selected] {
+	font-weight: var(--ds-font-weight-medium);
+	color: var(--ds-color-neutral-text-default);
+	background-color: var(--ds-color-neutral-surface-tinted);
+}
+
+.ObAutocomplete-item[data-selected][data-highlighted] {
+	background-color: var(--ds-color-neutral-surface-active);
+}
+
+.ObAutocomplete-item[data-disabled] {
+	cursor: not-allowed;
+	opacity: var(--ds-opacity-disabled);
+}
+
+/*
+ * The option's content. It is a flex row rather than the inline box it looks like, because
+ * `renderOption` is normally an icon or an avatar beside a block of text — and a block child in an
+ * inline parent drops onto its own line, stacking the two instead of setting them side by side.
+ */
+.ObAutocomplete-itemContent {
+	display: flex;
+	align-items: center;
+	gap: var(--ds-size-2);
+	flex: 1;
+	min-inline-size: 0;
+}
+
+.ObAutocomplete-itemIndicator {
+	display: inline-flex;
+	flex: none;
+	inline-size: 1em;
+}
+
+.ObAutocomplete-groupLabel {
+	padding: var(--ds-size-2);
+	font-size: var(--ds-font-size-1);
+	font-weight: var(--ds-font-weight-semibold);
+	color: var(--ds-color-neutral-text-subtle);
+	text-transform: uppercase;
+}
+
+.ObAutocomplete-empty:not(:empty) {
+	padding: var(--ds-size-2);
+	color: var(--ds-color-neutral-text-subtle);
+}