@entur/form 8.4.2 → 9.0.1

package/dist/styles.css

@@ -742,19 +742,19 @@
   padding: 0;
 }
 
-.eds-form-control-wrapper:focus-within .eds-input-group__label {
+.eds-form-control-wrapper:focus-within :not(.eds-input-group-label-wrapper--controlled-label-position) .eds-input-group__label {
   top: 0.375rem;
   font-size: 0.75rem;
   line-height: 0.75rem;
   height: 10px;
   padding: 0;
 }
-.eds-textarea__label .eds-form-control-wrapper:focus-within .eds-input-group__label {
+.eds-textarea__label .eds-form-control-wrapper:focus-within :not(.eds-input-group-label-wrapper--controlled-label-position) .eds-input-group__label {
   box-shadow: 0px -2px 0px 4px var(--textarea-label-background);
   background: var(--textarea-label-background);
   width: calc(100% - 1rem - 1rem - 4px);
 }
-.eds-form-control-wrapper--size-large:focus-within .eds-input-group__label {
+.eds-form-control-wrapper--size-large:focus-within :not(.eds-input-group-label-wrapper--controlled-label-position) .eds-input-group__label {
   top: 0.5rem;
   font-size: 0.875rem;
   line-height: 1rem;
@@ -1023,29 +1023,29 @@
 .eds-contrast .eds-checkbox__container input:checked + .eds-checkbox__icon--readonly .eds-checkbox-icon rect, .eds-contrast .eds-checkbox__container input:indeterminate + .eds-checkbox__icon--readonly .eds-checkbox-icon rect {
   fill: var(--components-form-checkbox-contrast-icon-readonly);
 }
-.eds-checkbox__container:hover(:not(:has(input:disabled))) input + .eds-checkbox__icon {
+.eds-checkbox__container:hover:not(:has(input:disabled)) input + .eds-checkbox__icon {
   border-color: var(--components-form-checkbox-standard-border);
   background-color: var(--components-form-checkbox-standard-fill-hover);
 }
-.eds-contrast .eds-checkbox__container:hover(:not(:has(input:disabled))) input + .eds-checkbox__icon {
+.eds-contrast .eds-checkbox__container:hover:not(:has(input:disabled)) input + .eds-checkbox__icon {
   border-color: var(--components-form-checkbox-contrast-border);
   background-color: var(--components-form-checkbox-contrast-fill-hover);
 }
-.eds-checkbox__container:hover(:not(:has(input:disabled))) input:checked + .eds-checkbox__icon,
-.eds-checkbox__container:hover(:not(:has(input:disabled))) input:indeterminate + .eds-checkbox__icon:not(.eds-checkbox--disabled) {
+.eds-checkbox__container:hover:not(:has(input:disabled)) input:checked + .eds-checkbox__icon,
+.eds-checkbox__container:hover:not(:has(input:disabled)) input:indeterminate + .eds-checkbox__icon:not(.eds-checkbox--disabled) {
   border-color: transparent;
   background-color: var(--components-form-checkbox-standard-fill-selectedhover);
 }
-.eds-contrast .eds-checkbox__container:hover(:not(:has(input:disabled))) input:checked + .eds-checkbox__icon,
-.eds-contrast .eds-checkbox__container:hover(:not(:has(input:disabled))) input:indeterminate + .eds-checkbox__icon:not(.eds-checkbox--disabled) {
+.eds-contrast .eds-checkbox__container:hover:not(:has(input:disabled)) input:checked + .eds-checkbox__icon,
+.eds-contrast .eds-checkbox__container:hover:not(:has(input:disabled)) input:indeterminate + .eds-checkbox__icon:not(.eds-checkbox--disabled) {
   background-color: var(--components-form-checkbox-contrast-fill-selectedhover);
 }
-.eds-checkbox__container:active(:not(:has(input:disabled))) input:checked + .eds-checkbox__icon,
-.eds-checkbox__container:active(:not(:has(input:disabled))) input:indeterminate + .eds-checkbox__icon {
+.eds-checkbox__container:active:not(:has(input:disabled)) input:checked + .eds-checkbox__icon,
+.eds-checkbox__container:active:not(:has(input:disabled)) input:indeterminate + .eds-checkbox__icon {
   background-color: var(--components-form-checkbox-standard-fill-selected);
 }
-.eds-contrast .eds-checkbox__container:active(:not(:has(input:disabled))) input:checked + .eds-checkbox__icon,
-.eds-contrast .eds-checkbox__container:active(:not(:has(input:disabled))) input:indeterminate + .eds-checkbox__icon {
+.eds-contrast .eds-checkbox__container:active:not(:has(input:disabled)) input:checked + .eds-checkbox__icon,
+.eds-contrast .eds-checkbox__container:active:not(:has(input:disabled)) input:indeterminate + .eds-checkbox__icon {
   background-color: var(--components-form-checkbox-contrast-fill-selected);
 }
 .eds-checkbox__container:has(:focus-visible) .eds-checkbox__icon {
@@ -1704,11 +1704,26 @@ input:disabled + .eds-input-panel__container {
   cursor: text;
 }/* DO NOT CHANGE!*/
 /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
+.eds-segmented-control .eds-label {
+  font-weight: 600;
+}
+.eds-segmented-control .eds-segmented-control__choices {
+  position: relative;
+  display: flex;
+  margin-top: 0.25rem;
+  background: var(--components-form-segmentedcontrol-standard-background);
+  border-radius: 0.5rem;
+}
+.eds-contrast .eds-segmented-control .eds-segmented-control__choices {
+  background: var(--components-form-segmentedcontrol-contrast-background);
+}/* DO NOT CHANGE!*/
+/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
 .eds-segmented-choice {
-  display: block;
+  all: unset;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   flex: 1 1 0px;
-}
-.eds-segmented-choice .eds-base-segmented {
   --background-color: var(--components-form-segmentedcontrol-standard-fill-unselected);
   background-color: var(--background-color);
   border-radius: 0.25rem;
@@ -1722,71 +1737,41 @@ input:disabled + .eds-input-panel__container {
   padding: calc(0.25rem / 2) 0.75rem;
   text-align: center;
   user-select: none;
+  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
+  vertical-align: middle;
+  text-decoration: none;
 }
-.eds-segmented-choice .eds-base-segmented--large {
+.eds-segmented-choice--large {
   font-size: 1rem;
   height: 2.5rem;
   line-height: 1.5rem;
   padding: 0.5rem 0.75rem;
 }
-.eds-contrast .eds-segmented-choice .eds-base-segmented {
+.eds-contrast .eds-segmented-choice {
   --background-color: var(--components-form-segmentedcontrol-contrast-background);
   color: var(--components-form-segmentedcontrol-contrast-text-unselected);
 }
-.eds-segmented-choice:hover input:not(:checked) + .eds-base-segmented {
+.eds-segmented-choice:hover {
   --background-color: var(--components-form-segmentedcontrol-standard-fill-hover);
 }
-.eds-contrast .eds-segmented-choice:hover input:not(:checked) + .eds-base-segmented {
-  --background-color: var(--components-form-segmentedcontrol-contrast-fill-hover);
-}
-.eds-segmented-choice:hover input:checked + .eds-base-segmented {
-  --background-color: var(--components-form-segmentedcontrol-standard-fill-hover);
-  color: var(--components-form-segmentedcontrol-standard-text-unselected);
-}
-.eds-contrast .eds-segmented-choice:hover input:checked + .eds-base-segmented {
+.eds-contrast .eds-segmented-choice:hover {
   --background-color: var(--components-form-segmentedcontrol-contrast-fill-hover);
-  color: var(--components-form-segmentedcontrol-contrast-text-unselected);
 }
-.eds-segmented-choice input {
-  appearance: none;
-  position: absolute;
-  opacity: 0;
-  height: 0;
-  width: 0;
-}
-.eds-segmented-choice input:checked + .eds-base-segmented {
+.eds-segmented-choice[aria-checked=true] {
   --background-color: var(--components-form-segmentedcontrol-standard-fill-selected);
   color: var(--components-form-segmentedcontrol-standard-text-selected);
   box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
 }
-.eds-contrast .eds-segmented-choice input:checked + .eds-base-segmented {
+.eds-contrast .eds-segmented-choice[aria-checked=true] {
   --background-color: var(--components-form-segmentedcontrol-contrast-fill-selected);
   box-shadow: 0 0.0625rem 0.1875rem rgb(57, 61, 121);
   color: var(--components-form-segmentedcontrol-contrast-text-selected);
 }
-.eds-segmented-choice input:focus-visible:not(:checked) + .eds-base-segmented {
+.eds-segmented-choice:focus-visible {
   outline: 2px solid #181c56;
   outline-color: var(--basecolors-stroke-focus-standard);
   outline-offset: 0.125rem;
 }
-.eds-contrast .eds-segmented-choice input:focus-visible:not(:checked) + .eds-base-segmented {
+.eds-contrast .eds-segmented-choice:focus-visible {
   outline-color: var(--basecolors-stroke-focus-contrast);
-}
-.eds-segmented-choice input:focus-visible:checked + .eds-base-segmented {
-  outline: 2px solid #181c56;
-  outline-color: var(--basecolors-stroke-focus-standard);
-  outline-offset: 0.125rem;
-}
-.eds-contrast .eds-segmented-choice input:focus-visible:checked + .eds-base-segmented {
-  outline-color: var(--basecolors-stroke-focus-contrast);
-}/* DO NOT CHANGE!*/
-/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-.eds-segmented-control {
-  margin-top: 0.25rem;
-  display: flex;
-  background: var(--components-form-segmentedcontrol-standard-background);
-  border-radius: 0.5rem;
-}
-.eds-contrast .eds-segmented-control {
-  background: var(--components-form-segmentedcontrol-contrast-background);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@entur/form",
-  "version": "8.4.2",
+  "version": "9.0.1",
   "license": "EUPL-1.2",
   "main": "dist/form.cjs.js",
   "module": "dist/form.esm.js",
@@ -48,5 +48,5 @@
     "vite": "^7.1.3",
     "vite-plugin-dts": "^4.5.4"
   },
-  "gitHead": "ace4c7d9d1ccb05c66a12669e1c702907840e099"
+  "gitHead": "51a246c05d8abbc22f93b38be56a5242fcee00c6"
 }

package/dist/segmented-control/MultipleSegmentedControl.d.ts

@@ -1,19 +0,0 @@
-import { default as React } from 'react';
-import { SelectedValues } from './SegmentedContext';
-export type MultipleSegmentedControlProps = {
-    /** Navn på input-elementene */
-    name?: string;
-    /** Beskrivende tekst */
-    label?: string;
-    /** En eller flere SegmentedChoice-komponenter */
-    children: React.ReactNode;
-    /** Den eller de valgte verdiene */
-    selectedValue: SelectedValues;
-    /** Callback for når det gjøres et valg */
-    onChange: (value: SelectedValues) => void;
-    [key: string]: any;
-};
-/**This component is not used by anyone, and is therefore deprecated
- * @deprecated
- */
-export declare const MultipleSegmentedControl: React.FC<MultipleSegmentedControlProps>;

package/dist/segmented-control/SegmentedChoice.d.ts

@@ -1,12 +0,0 @@
-import { default as React } from 'react';
-export type SegmentedChoiceProps = {
-    /** Verdien til valget */
-    value: string;
-    /** Innhold som beskriver valget */
-    children: React.ReactNode;
-    /** Ekstra klassenavn */
-    className?: string;
-    /** Callback som kalles når komponenten endres */
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-} & React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-export declare const SegmentedChoice: React.ForwardRefExoticComponent<Omit<SegmentedChoiceProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/segmented-control/SegmentedContext.d.ts

@@ -1,33 +0,0 @@
-import { default as React } from 'react';
-export type SelectedValues = {
-    [key: string]: boolean;
-};
-export type SelectedValue = string | null;
-export type SegmentedContextProps = {
-    name: string;
-    onChange: (value: SelectedValues) => void;
-    selectedValue: SelectedValues;
-    multiple: true;
-    size: 'medium' | 'large';
-} | {
-    name: string;
-    onChange: (value: SelectedValue) => void;
-    selectedValue: SelectedValue;
-    multiple: false;
-    size: 'medium' | 'large';
-};
-export type SegmentedProviderProps = {
-    name?: string;
-    onChange?: (value: SelectedValues) => void;
-    selectedValue: SelectedValues;
-    multiple: true;
-    size: 'medium' | 'large';
-} | {
-    name?: string;
-    onChange?: (value: SelectedValue) => void;
-    selectedValue: SelectedValue;
-    multiple: false;
-    size: 'medium' | 'large';
-};
-export declare const SegmentedProvider: React.FC<SegmentedProviderProps>;
-export declare const useSegmentedContext: () => SegmentedContextProps;

package/dist/segmented-control/SegmentedControl.d.ts

@@ -1,20 +0,0 @@
-import { default as React } from 'react';
-import { SelectedValue } from './SegmentedContext';
-export type SegmentedControlProps = {
-    /** Navn på input-elementene */
-    name?: string;
-    /** Beskrivende tekst */
-    label?: string;
-    /** En eller flere SegmentedChoice-komponenter */
-    children: React.ReactNode;
-    /** Den valgte verdien */
-    selectedValue: SelectedValue;
-    /** Callback for når det gjøres et valg */
-    onChange: (value: SelectedValue) => void;
-    /** Størrelsen på SegmentedChoice-komponentene */
-    size?: 'medium' | 'large';
-    /** Ekstra klassenavn */
-    className?: string;
-    [key: string]: any;
-};
-export declare const SegmentedControl: React.FC<SegmentedControlProps>;