@bethinkpl/design-system 42.0.0 → 44.0.0

package/lib/js/styles/Shadows/Shadows.stories.ts

@@ -12,6 +12,10 @@ const shadows = [
 	{ name: 'shadow-m', modifier: '-ds-shadowM' },
 	{ name: 'shadow-l', modifier: '-ds-shadowL' },
 	{ name: 'shadow-xl', modifier: '-ds-shadowXl' },
+	{ name: 'shadow-top-s', modifier: '-ds-shadowTopS' },
+	{ name: 'shadow-top-m', modifier: '-ds-shadowTopM' },
+	{ name: 'shadow-top-l', modifier: '-ds-shadowTopL' },
+	{ name: 'shadow-top-xl', modifier: '-ds-shadowTopXl' },
 	{ name: 'shadow-inset-s', modifier: '-ds-shadowInsetS' },
 	{ name: 'shadow-inset-m', modifier: '-ds-shadowInsetM' },
 ];

package/lib/styles/mixins/_dropdown-surface.scss

@@ -0,0 +1,24 @@
+@import '../settings/colors/tokens';
+@import '../settings/radiuses';
+@import '../settings/shadows';
+
+// The visual surface shared by floating panels — DsDropdown and SelectField's listbox.
+// Deliberately covers appearance only: sizing, scrolling and positioning stay with the
+// consumer, because those legitimately differ between popper engines and use cases.
+@mixin dropdownSurface {
+	background-color: $color-default-background;
+	box-shadow: $shadow-m;
+	overflow: hidden;
+}
+
+// Applied separately from `dropdownSurface`, since a panel anchored below its trigger keeps
+// its top corners square (and vice versa).
+@mixin dropdownSurfaceRadiusTop {
+	border-top-left-radius: $radius-s;
+	border-top-right-radius: $radius-s;
+}
+
+@mixin dropdownSurfaceRadiusBottom {
+	border-bottom-left-radius: $radius-s;
+	border-bottom-right-radius: $radius-s;
+}

package/lib/styles/settings/_shadows.scss

@@ -23,6 +23,24 @@ $shadow-xl:
 	0 16px 32px $color-default-shadow-strong,
 	0 0 4px $color-default-shadow;
 
+$shadow-top-s:
+	0 -1px 2px $color-default-shadow-weak,
+	0 -8px 16px $color-default-shadow-weak,
+	0 -2px 4px $color-default-shadow-strong,
+	0 0 4px $color-default-shadow;
+$shadow-top-m:
+	0 -2px 4px $color-default-shadow-weak,
+	0 -6px 12px $color-default-shadow-strong,
+	0 0 4px $color-default-shadow;
+$shadow-top-l:
+	0 -4px 8px $color-default-shadow-weak,
+	0 -10px 20px $color-default-shadow-strong,
+	0 0 4px $color-default-shadow;
+$shadow-top-xl:
+	0 -8px 16px $color-default-shadow-weak,
+	0 -16px 32px $color-default-shadow-strong,
+	0 0 4px $color-default-shadow;
+
 $shadow-inset-m: inset 0 1px 4px $color-default-shadow-heavy;
 $shadow-inset-s: inset 0 1px 3px $color-default-shadow-heavy;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bethinkpl/design-system",
-  "version": "42.0.0",
+  "version": "44.0.0",
   "description": "Bethink universe design-system",
   "repository": {
     "type": "git",

package/dist/lib/js/components/Form/InputField/useInputFieldWithinForm.d.ts

@@ -1,8 +0,0 @@
-import { MaybeRefOrGetter, Ref } from 'vue';
-
-export declare function useInputFieldWithinForm(name: MaybeRefOrGetter<string | undefined>, modelValue: Ref<string | undefined>): {
-    onBlur: (event: Event) => void;
-    onInput: () => void;
-    value: Ref<string | undefined, string | undefined> | Ref<string[], string[]>;
-    errors: Ref<string[], string[]>;
-};