@casinogate/ui 1.5.1 → 1.5.2

package/dist/assets/css/root.css

@@ -312,6 +312,9 @@
   .cgui\:h-\(--bits-select-anchor-height\) {
     height: var(--bits-select-anchor-height);
   }
+  .cgui\:h-\(--cg-ui-max-content-height\) {
+    height: var(--cg-ui-max-content-height);
+  }
   .cgui\:h-3 {
     height: calc(var(--cgui-spacing) * 3);
   }
@@ -357,6 +360,9 @@
   .cgui\:h-20 {
     height: calc(var(--cgui-spacing) * 20);
   }
+  .cgui\:h-30 {
+    height: calc(var(--cgui-spacing) * 30);
+  }
   .cgui\:h-34 {
     height: calc(var(--cgui-spacing) * 34);
   }
@@ -543,6 +549,9 @@
   .cgui\:justify-end {
     justify-content: flex-end;
   }
+  .cgui\:gap-0\.5 {
+    gap: calc(var(--cgui-spacing) * 0.5);
+  }
   .cgui\:gap-1 {
     gap: calc(var(--cgui-spacing) * 1);
   }
@@ -1044,6 +1053,9 @@
   .cgui\:scrollbar-thumb-rounded-md {
     --scrollbar-thumb-radius: calc(var(--cg-ui-number-md) * 1px);
   }
+  .cgui\:scrollbar-thumb-stroke-default {
+    --scrollbar-thumb: var(--cg-ui-palette-neutral-40);
+  }
   .cgui\:scrollbar-thumb-surface-regular {
     --scrollbar-thumb: var(--cg-ui-palette-neutral-50);
   }
@@ -1062,6 +1074,9 @@
   .cgui\:scrollbar-track-surface-lightest {
     --scrollbar-track: var(--cg-ui-palette-neutral-10);
   }
+  .cgui\:scrollbar-track-transparent {
+    --scrollbar-track: transparent;
+  }
   .cgui\:group-has-\[\[data-slot\=\"header\"\]\]\/appShell\:h-\[calc\(100\%-var\(--app-shell-header-height\)\)\] {
     &:is(:where(.cgui\:group\/appShell):has(*:is([data-slot="header"])) *) {
       height: calc(100% - var(--app-shell-header-height));
@@ -1336,21 +1351,6 @@
       opacity: 50%;
     }
   }
-  .cgui\:data-\[end-chevron\]\:right-2\.5 {
-    &[data-end-chevron] {
-      right: calc(var(--cgui-spacing) * 2.5);
-    }
-  }
-  .cgui\:data-\[end-chevron\]\:right-3 {
-    &[data-end-chevron] {
-      right: calc(var(--cgui-spacing) * 3);
-    }
-  }
-  .cgui\:data-\[end-chevron\]\:right-4 {
-    &[data-end-chevron] {
-      right: calc(var(--cgui-spacing) * 4);
-    }
-  }
   .cgui\:data-\[end-chevron\]\:pr-7 {
     &[data-end-chevron] {
       padding-right: calc(var(--cgui-spacing) * 7);
@@ -1475,21 +1475,6 @@
       left: calc(var(--cgui-spacing) * 2);
     }
   }
-  .cgui\:data-\[start-chevron\]\:left-2\.5 {
-    &[data-start-chevron] {
-      left: calc(var(--cgui-spacing) * 2.5);
-    }
-  }
-  .cgui\:data-\[start-chevron\]\:left-3 {
-    &[data-start-chevron] {
-      left: calc(var(--cgui-spacing) * 3);
-    }
-  }
-  .cgui\:data-\[start-chevron\]\:left-4 {
-    &[data-start-chevron] {
-      left: calc(var(--cgui-spacing) * 4);
-    }
-  }
   .cgui\:data-\[start-chevron\]\:pl-8 {
     &[data-start-chevron] {
       padding-left: calc(var(--cgui-spacing) * 8);

package/dist/components/field/components/field.label.svelte

@@ -39,5 +39,13 @@
 {:else}
   <label {...mergedProps}>
     {@render children?.()}
+
+    {#if labelState.root.opts.required.current}
+      <span
+        class=" cgui:inline-flex cgui:items-center cgui:justify-center cgui:text-caption cgui:font-medium cgui:text-fg-error cgui:shrink-0 cgui:align-middle"
+      >
+        *
+      </span>
+    {/if}
   </label>
 {/if}

package/dist/components/field/components/field.root.svelte

@@ -37,12 +37,19 @@
   FieldStylesContext.set(box.with(() => variants));
 
   const mergedProps = $derived(mergeProps(restProps, rootState.props, { class: cn(variants.root(), className) }));
+
+  const attrStates = $derived({
+    invalid: rootState.opts.invalid.current,
+    disabled: rootState.opts.disabled.current,
+    readOnly: rootState.opts.readOnly.current,
+    required: rootState.opts.required.current,
+  });
 </script>
 
 {#if child}
-  {@render child({ props: mergedProps })}
+  {@render child({ props: mergedProps, ...attrStates })}
 {:else}
   <div {...mergedProps}>
-    {@render children?.()}
+    {@render children?.(attrStates)}
   </div>
 {/if}

package/dist/components/field/components/field.svelte.d.ts

@@ -78,6 +78,8 @@ export declare class FieldControlState {
     readonly props: {
         readonly id: string;
         readonly 'aria-invalid': boolean;
+        readonly disabled: boolean;
+        readonly readOnly: boolean;
     };
 }
 export {};

package/dist/components/field/components/field.svelte.js

@@ -122,5 +122,7 @@ export class FieldControlState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         'aria-invalid': this.root.opts.invalid.current,
+        disabled: this.root.opts.disabled.current,
+        readOnly: this.root.opts.readOnly.current,
     }));
 }

package/dist/components/field/field.stories.svelte

@@ -7,7 +7,7 @@
 
   const parameters: Parameters = {
     controls: {
-      include: [],
+      include: ['invalid', 'disabled', 'required', 'readOnly'],
     },
   };
 
@@ -19,7 +19,12 @@
 
   type Args = ComponentProps<typeof FieldPrimitive.Root>;
 
-  const args: Args = {};
+  const args: Args = {
+    invalid: false,
+    disabled: false,
+    required: false,
+    readOnly: false,
+  };
 </script>
 
 <Story name="Basic" {args} {parameters}>
@@ -34,7 +39,7 @@
 
 <Story name="Primitive" {args} {parameters}>
   {#snippet template(args: Args)}
-    <FieldPrimitive.Root {...args} invalid>
+    <FieldPrimitive.Root {...args} invalid required>
       <FieldPrimitive.Label>Label</FieldPrimitive.Label>
 
       <FieldPrimitive.Control>

package/dist/components/field/styles.d.ts

@@ -21,7 +21,7 @@ export declare const fieldStyles: import("tailwind-variants").TVReturnType<{
     };
 } | {}, {
     root: string;
-    label: string;
+    label: string[];
     error: string;
     description: string;
 }, undefined, {
@@ -35,12 +35,12 @@ export declare const fieldStyles: import("tailwind-variants").TVReturnType<{
     };
 } | {}, {
     root: string;
-    label: string;
+    label: string[];
     error: string;
     description: string;
 }, import("tailwind-variants").TVReturnType<unknown, {
     root: string;
-    label: string;
+    label: string[];
     error: string;
     description: string;
 }, undefined, unknown, unknown, undefined>>;

package/dist/components/field/styles.js

@@ -4,7 +4,12 @@ import { Context } from 'runed';
 export const fieldStyles = tv({
     slots: {
         root: 'cgui:flex cgui:flex-col cgui:gap-1',
-        label: 'cgui:text-fg-medium cgui:text-caption cgui:font-medium',
+        label: [
+            'cgui:relative',
+            'cgui:w-fit',
+            'cgui:inline-flex cgui:items-center cgui:gap-0.5',
+            'cgui:text-fg-medium cgui:text-caption cgui:font-medium',
+        ],
         error: 'cgui:text-caption  cgui:text-fg-error',
         description: 'cgui:text-caption cgui:text-fg-medium',
     },

package/dist/components/field/types.d.ts

@@ -6,6 +6,11 @@ type FieldRootPropsWithoutHTML = WithElementRef<WithChild<{
     disabled?: boolean;
     readOnly?: boolean;
     required?: boolean;
+}, {
+    invalid: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    required: boolean;
 }>>;
 export type FieldRootProps = FieldRootPropsWithoutHTML & Without<PrimitiveDivAttributes, FieldRootPropsWithoutHTML>;
 export type FieldControlProps = {

package/dist/components/icons/asterisk.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import type { IconProps } from './types.js';
+
+  let { width = 24, height = 24, color = 'currentColor', ...props }: IconProps = $props();
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" {width} {height} viewBox="0 0 24 24" {...props}>
+  <path
+    fill={color}
+    d="M21 13h-6.6l4.7 4.7l-1.4 1.4l-4.7-4.7V21h-2v-6.7L6.3 19l-1.4-1.4L9.4 13H3v-2h6.6L4.9 6.3l1.4-1.4L11 9.6V3h2v6.4l4.6-4.6L19 6.3L14.3 11H21z"
+  />
+</svg>

package/dist/components/icons/asterisk.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Asterisk: import("svelte").Component<import("../../internal/types/html-attributes.js").PrimitiveSVGAttributes, {}, "">;
+type Asterisk = ReturnType<typeof Asterisk>;
+export default Asterisk;

package/dist/components/icons/exports.d.ts

@@ -1,3 +1,4 @@
+export { default as Asterisk } from './asterisk.svelte';
 export { default as CaretDown } from './caret-down.svelte';
 export { default as CaretUp } from './caret-up.svelte';
 export { default as Check } from './check.svelte';

package/dist/components/icons/exports.js

@@ -1,3 +1,4 @@
+export { default as Asterisk } from './asterisk.svelte';
 export { default as CaretDown } from './caret-down.svelte';
 export { default as CaretUp } from './caret-up.svelte';
 export { default as Check } from './check.svelte';

package/dist/components/select/components/select.trigger.svelte

@@ -37,7 +37,7 @@
           'cgui:group-data-[state=open]/select-trigger:-rotate-180'
         )}
       >
-        <Icon.ChevronDown width={20} height={20} />
+        <Icon.ChevronDown width={18} height={18} />
       </span>
     {/if}
   </SelectPrimitive.Trigger>

package/dist/components/select/select.stories.svelte

@@ -131,7 +131,7 @@
       <SelectPrimitive.Trigger>{selectedGroupedLabel}</SelectPrimitive.Trigger>
 
       <SelectPrimitive.Portal>
-        <SelectPrimitive.Content>
+        <SelectPrimitive.Content class="cgui:h-30">
           <SelectPrimitive.Viewport>
             <SelectPrimitive.Group>
               {#each organizedGroups as group}
@@ -191,6 +191,7 @@
       <Select.Root
         {...args}
         type="multiple"
+        maxContentHeight="150px"
         data={[
           {
             group: 'Group 1',

package/dist/components/select/select.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { SelectItem, SelectItemData, SelectItemGroup, SelectProps } from './types.js';
 
+  import type { Attachment } from 'svelte/attachments';
   import Content from './components/select.content.svelte';
   import GroupHeading from './components/select.group-heading.svelte';
   import Group from './components/select.group.svelte';
@@ -16,6 +17,8 @@
 
     empty = 'No results found',
 
+    maxContentHeight,
+
     data,
     item,
     trigger,
@@ -76,6 +79,22 @@
   const hasResults = $derived.by(() => {
     return data.length > 0;
   });
+
+  const contentStyle = $derived.by(() => {
+    return {
+      ...(maxContentHeight ? { '--cg-ui-max-content-height': maxContentHeight } : {}),
+    };
+  });
+
+  const contentMount: Attachment<HTMLDivElement> = (el) => {
+    $effect.pre(() => {
+      if (!el) return;
+
+      Object.entries(contentStyle).forEach(([key, value]) => {
+        el.style.setProperty(key, value);
+      });
+    });
+  };
 </script>
 
 {#snippet itemsString(item: string)}
@@ -116,7 +135,7 @@
   {/if}
 
   <Portal>
-    <Content>
+    <Content {@attach contentMount} class="cgui:h-(--cg-ui-max-content-height)">
       <Viewport>
         {#if hasResults}
           {#each data as item (getItemKey(item))}

package/dist/components/select/styles.js

@@ -4,6 +4,7 @@ import { keyWithPrefix } from './../../internal/utils/common.js';
 export const selectVariants = tv({
     slots: {
         content: [
+            'cgui:scrollbar-thin',
             'cgui:relative cgui:overflow-y-auto cgui:overflow-x-hidden',
             'cgui:shadow-select cgui:bg-surface-white',
             'cgui:rounded-sm',
@@ -21,6 +22,7 @@ export const selectVariants = tv({
             'cgui:[&_svg]:shrink-0 cgui:[&_svg]:pointer-events-none',
         ],
         viewport: [
+            ' cgui:scrollbar-track-transparent cgui:scrollbar-thumb-stroke-default cgui:scrollbar-thumb-rounded-full',
             'cgui:h-(--bits-select-anchor-height) cgui:min-w-(--bits-select-anchor-width) cgui:w-full cgui:scroll-my-1 cgui:p-1',
         ],
         group: [],
@@ -28,6 +30,7 @@ export const selectVariants = tv({
         trigger: [
             'cgui:group/select-trigger',
             'cgui:relative cgui:flex cgui:items-center cgui:justify-between cgui:flex-wrap',
+            'cgui:text-body',
             'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
         ],
     },
@@ -54,7 +57,6 @@ export const selectVariants = tv({
                     'cgui:px-2.5 cgui:py-1.5',
                     'cgui:data-[start-chevron]:pl-8 cgui:data-[end-chevron]:pr-8',
                 ],
-                // chevron: ['cgui:data-[start-chevron]:left-2.5 cgui:data-[end-chevron]:right-2.5'],
             },
             md: {
                 trigger: [
@@ -63,15 +65,14 @@ export const selectVariants = tv({
                     'cgui:data-[start-chevron]:pl-10 cgui:data-[end-chevron]:pr-10',
                 ],
                 chevron: [],
-                // chevron: ['cgui:data-[start-chevron]:left-3 cgui:data-[end-chevron]:right-3'],
             },
             lg: {
                 trigger: [
                     'cgui:min-h-11',
+                    'cgui:text-heading-2',
                     'cgui:px-4 cgui:py-2.5',
                     'cgui:data-[start-chevron]:pl-14 cgui:data-[end-chevron]:pr-14',
                 ],
-                // chevron: ['cgui:data-[start-chevron]:left-4 cgui:data-[end-chevron]:right-4'],
             },
         },
         rounded: {

package/dist/components/select/types.d.ts

@@ -37,6 +37,7 @@ export type SelectProps = SelectRootProps & {
         label: string;
     }]>;
     empty?: Snippet | string;
+    maxContentHeight?: string;
     side?: SelectContentProps['side'];
     sideOffset?: SelectContentProps['sideOffset'];
     align?: SelectContentProps['align'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@casinogate/ui",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",