@inntechcorp/it-design 4.0.0-beta.2 → 4.0.0-beta.4

package/dist/css/base.css

@@ -1,392 +1,105 @@
-/* ================================= */
-/* BASE - Design Tokens & Core Styles */
-/* ITD Design System Foundation */
-/* ================================= */
-@layer base {
-  :root,
-  [data-theme="light"] {
-    /* ================================= */
-    /* COLOR SCHEME */
-    /* ================================= */
-    color-scheme: light;
-    
-    /* ================================= */
-    /* TEXT RENDERING */
-    /* ================================= */
-  }
-
-  @supports (text-wrap: pretty) {
-    :root,
-    [data-theme="light"] {
-      text-wrap: pretty;
-    }
-  }
-
-  @supports (hanging-punctuation: first allow-end) {
-    :root,
-    [data-theme="light"] {
-      hanging-punctuation: first allow-end;
-    }
-  }
-
-  :root,
-  [data-theme="light"] {
-    
-    /* ================================= */
-    /* TYPOGRAPHY */
-    /* ================================= */
-    --itd-font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
-                    "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Arial,
-                    "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji",
-                    sans-serif;
-    
-    --itd-text-xs: .75rem;
-    --itd-text-xs--line-height: calc(1 / .75);
-    --itd-text-sm: .875rem;
-    --itd-text-sm--line-height: calc(1.25 / .875);
-    --itd-text-default: 1rem;
-    --itd-text-default--line-height: calc(1.5 / 1);
-    --itd-text-lg: 1.125rem;
-    --itd-text-lg--line-height: calc(1.75 / 1.125);
-    --itd-text-xl: 1.25rem;
-    --itd-text-xl--line-height: calc(1.75 / 1.25);
-    --itd-text-2xl: 1.5rem;
-    --itd-text-2xl--line-height: calc(2 / 1.5);
-    --itd-text-3xl: 1.875rem;
-    --itd-text-3xl--line-height: calc(2.25 / 1.875);
-    --itd-text-4xl: 2.25rem;
-    --itd-text-4xl--line-height: calc(2.5 / 2.25);
-    --itd-text-5xl: 3rem;
-    --itd-text-5xl--line-height: 1;
-    --itd-text-7xl: 4.5rem;
-    --itd-text-7xl--line-height: 1;
-    
-    --itd-font-weight-normal: 400;
-    --itd-font-weight-medium: 500;
-    --itd-font-weight-semibold: 600;
-    --itd-font-weight-bold: 700;
-    --itd-font-weight-extrabold: 800;
-
-    /* ================================= */
-    /* TRACKING */
-    /* ================================= */
-    --itd-tracking-tighter: -.05em;
-    --itd-tracking-tight: -.025em;
-    --itd-tracking-widest: .1em;
-
-    /* ================================= */
-    /* SPACING */
-    /* ================================= */
-    --itd-spacing: .25rem;
-
-    /* ================================= */
-    /* COMPONENT SIZE SCALE              */
-    /* Button, Input, Select, DatePicker */
-    /* TextArea, Upload — hepsi bu       */
-    /* token'ları kullanır.              */
-    /* ================================= */
-    --itd-size-xs-h:     calc(var(--itd-spacing) * 6);     /* 24px */
-    --itd-size-xs-px:    calc(var(--itd-spacing) * 2);     /* 8px  */
-    --itd-size-xs-gap:   calc(var(--itd-spacing) * 1);     /* 4px  */
-    --itd-size-xs-font:  var(--itd-text-xs);
-    --itd-size-xs-icon:  calc(var(--itd-spacing) * 3);     /* 12px */
-
-    --itd-size-sm-h:     calc(var(--itd-spacing) * 7);     /* 28px */
-    --itd-size-sm-px:    calc(var(--itd-spacing) * 3);     /* 12px */
-    --itd-size-sm-gap:   calc(var(--itd-spacing) * 1.5);   /* 6px  */
-    --itd-size-sm-font:  var(--itd-text-xs);
-    --itd-size-sm-icon:  calc(var(--itd-spacing) * 3.5);   /* 14px */
-
-    --itd-size-md-h:     calc(var(--itd-spacing) * 8);     /* 32px */
-    --itd-size-md-px:    calc(var(--itd-spacing) * 3);     /* 12px */
-    --itd-size-md-gap:   calc(var(--itd-spacing) * 1.5);   /* 6px  */
-    --itd-size-md-font:  var(--itd-text-sm);
-    --itd-size-md-icon:  calc(var(--itd-spacing) * 4);     /* 16px */
-
-    --itd-size-df-h:     calc(var(--itd-spacing) * 9);     /* 36px */
-    --itd-size-df-px:    calc(var(--itd-spacing) * 4);     /* 16px */
-    --itd-size-df-gap:   calc(var(--itd-spacing) * 2);     /* 8px  */
-    --itd-size-df-font:  var(--itd-text-sm);
-    --itd-size-df-icon:  calc(var(--itd-spacing) * 4);     /* 16px */
-
-    --itd-size-lg-h:     calc(var(--itd-spacing) * 10);    /* 40px */
-    --itd-size-lg-px:    calc(var(--itd-spacing) * 6);     /* 24px */
-    --itd-size-lg-gap:   calc(var(--itd-spacing) * 2);     /* 8px  */
-    --itd-size-lg-font:  var(--itd-text-default);
-    --itd-size-lg-icon:  calc(var(--itd-spacing) * 5);     /* 20px */
-
-    --itd-size-xlg-h:    calc(var(--itd-spacing) * 11);    /* 44px */
-    --itd-size-xlg-px:   calc(var(--itd-spacing) * 8);     /* 32px */
-    --itd-size-xlg-gap:  calc(var(--itd-spacing) * 2);     /* 8px  */
-    --itd-size-xlg-font: var(--itd-text-lg);
-    --itd-size-xlg-icon: calc(var(--itd-spacing) * 6);     /* 24px */
-
-    /* ================================= */
-    /* BORDER RADIUS */
-    /* ================================= */
-    --itd-radius: .625rem;
-    --itd-radius-xs: .125rem;
-    --itd-radius-sm: calc(var(--itd-radius) - 4px);
-    --itd-radius-md: calc(var(--itd-radius) - 2px);
-    --itd-radius-lg: var(--itd-radius);
-    --itd-radius-xl: calc(var(--itd-radius) + 4px);
-    --itd-radius-2xl: 1rem;
-
-    /* ================================= */
-    /* LAYOUT */
-    /* ================================= */
-    --itd-container-xs: 20rem;
-    --itd-container-sm: 24rem;
-    --itd-container-md: 28rem;
-    --itd-container-lg: 32rem;
-    --itd-container-xl: 36rem;
-    --itd-container-2xl: 42rem;
-    --itd-container-3xl: 48rem;
-    --itd-container-4xl: 56rem;
-
-    /* ================================= */
-    /* THEME COLORS (Light Theme Default) */
-    /* ================================= */
-    /* Bu değerler ITDThemeProvider tarafından otomatik güncellenir */
-    --itd-text: oklch(0.35 0.02 250);
-    --itd-text-muted: oklch(0.55 0.02 250);
-    --itd-border: oklch(0.85 0.01 250);
-    --itd-ring: oklch(0.62 0.18 250);
-    --itd-link: oklch(0.62 0.18 250);
-    --itd-link-hover: oklch(0.52 0.18 250);
-    --itd-selection-bg: oklch(0.145 0 0);
-    --itd-selection-fg: oklch(1 0 0);
-    --itd-placeholder-color: oklch(0.65 0.01 250);
-    --itd-scrollbar-thumb: oklch(0.16 0.04 250 / 0.5);
-    --itd-scrollbar-thumb-hover: oklch(0.16 0.04 250);
-    
-  }
-
-  body,
-  .itd-provider,
-  #itd-modal-root,
-  #itd-tooltip-root,
-  #itd-notification-root {
-    font-family: var(--itd-font-sans);
-    color: var(--itd-text);
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  a {
-    cursor: pointer;
-    color: inherit;
-    text-decoration-line: none;
-    text-underline-offset: 4px;
-    border-radius: var(--itd-radius-xs);
-  }
-
-  a:hover {
-    text-decoration-line: underline;
-  }
-
-  a:focus-visible {
-    outline: 2px solid var(--itd-ring);
-    outline-offset: 2px;
-  }
-
-  * {
-    border-color: var(--itd-border);
-    outline-color: var(--itd-ring);
-  }
-
-  /* Mouse tıklamalarında outline gizle, sadece klavyede göster */
-  :focus {
-    outline: none;
-  }
-
-  /* Sadece non-form elementler için global ring */
-  /* Form elementleri kendi component wrapper'larında yönetilir */
-  :focus-visible:not(:is(input, select, textarea, button)) {
-    outline: 2px solid var(--itd-ring);
-    outline-offset: 2px;
-  }
-
-  /* Yüksek kontrast tercihinde outline daha belirgin */
-  @media (prefers-contrast: more) {
-    :focus-visible {
-      outline-width: 3px;
-    }
-  }
-
-  ::selection {
-    background-color: var(--itd-selection-bg);
-    color: var(--itd-selection-fg);
-  }
-
-  /* ========== Dark Theme Color Scheme ========== */
-  /* Styled-components theme ile yönetiliyor ama başlangıç değerleri */
-  [data-theme="dark"] {
-    color-scheme: dark;
-    
-    /* ITDThemeProvider tarafından override edilir */
-    --itd-text: oklch(0.85 0.02 250);
-    --itd-text-muted: oklch(0.65 0.02 250);
-    --itd-border: oklch(0.30 0.01 250);
-    --itd-ring: oklch(0.72 0.20 250);
-    --itd-link: oklch(0.75 0.20 250);
-    --itd-link-hover: oklch(0.70 0.20 250);
-    --itd-selection-bg: oklch(0.85 0.02 250);
-    --itd-selection-fg: oklch(0.12 0 0);
-    --itd-placeholder-color: oklch(0.62 0.02 250);
-    --itd-scrollbar-thumb: oklch(0.63 0.2 256.42 / 0.5);
-    --itd-scrollbar-thumb-hover: oklch(0.63 0.2 256.42);
-  }
+@layer base{:root,[data-theme=light]{color-scheme:light}@supports (text-wrap:pretty){:root,[data-theme=light]{text-wrap:pretty}}@supports (hanging-punctuation:first allow-end){:root,[data-theme=light]{hanging-punctuation:first allow-end}}:root,[data-theme=light]{--itd-font-sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",Ubuntu,Cantarell,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji",sans-serif;--itd-font-size-adjust:none;--itd-text-xs:0.75rem;--itd-text-xs--line-height:1.33333;--itd-text-sm:0.875rem;--itd-text-sm--line-height:1.42857;--itd-text-default:1rem;--itd-text-default--line-height:1.5;--itd-text-lg:1.125rem;--itd-text-lg--line-height:1.55556;--itd-text-xl:1.25rem;--itd-text-xl--line-height:1.4;--itd-text-2xl:1.5rem;--itd-text-2xl--line-height:1.33333;--itd-text-3xl:1.875rem;--itd-text-3xl--line-height:1.2;--itd-text-4xl:2.25rem;--itd-text-4xl--line-height:1.11111;--itd-text-5xl:3rem;--itd-text-5xl--line-height:1;--itd-text-7xl:4.5rem;--itd-text-7xl--line-height:1;--itd-text-9:0.5625rem;--itd-text-10:0.625rem;--itd-text-10--line-height:1;--itd-text-11:0.6875rem;--itd-text-11--line-height:1.18182;--itd-text-13:0.8125rem;--itd-text-13--line-height:1.53846;--itd-text-15:0.9375rem;--itd-text-15--line-height:1.6;--itd-text-22:1.375rem;--itd-text-22--line-height:1;--itd-text-26:1.625rem;--itd-text-26--line-height:1;--itd-text-28:1.75rem;--itd-text-28--line-height:1;--itd-font-weight-normal:400;--itd-font-weight-medium:500;--itd-font-weight-semibold:600;--itd-font-weight-bold:700;--itd-font-weight-extrabold:800;--itd-field-weight:var(--itd-font-weight-normal);--itd-field-weight-optical-step:60;--itd-field-weight-small:calc(var(--itd-field-weight) + var(--itd-field-weight-optical-step));--itd-leading-none:1;--itd-leading-tight:1.25;--itd-leading-snug:1.375;--itd-leading-normal:1.5;--itd-leading-relaxed:1.625;--itd-leading-7:1.75rem;--itd-tracking-tighter:-0.05em;--itd-tracking-tight:-0.025em;--itd-tracking-widest:0.1em;--itd-spacing:0.25rem;--itd-size-xs-h:calc(var(--itd-spacing)*6);--itd-size-xs-px:calc(var(--itd-spacing)*2);--itd-size-xs-gap:calc(var(--itd-spacing)*1);--itd-size-xs-font:var(--itd-text-xs);--itd-size-xs-field-fw:var(--itd-field-weight-small);--itd-size-xs-icon:calc(var(--itd-spacing)*3);--itd-size-sm-h:calc(var(--itd-spacing)*7);--itd-size-sm-px:calc(var(--itd-spacing)*3);--itd-size-sm-gap:calc(var(--itd-spacing)*1.5);--itd-size-sm-font:var(--itd-text-xs);--itd-size-sm-field-fw:var(--itd-field-weight-small);--itd-size-sm-icon:calc(var(--itd-spacing)*3.5);--itd-size-md-h:calc(var(--itd-spacing)*8.5);--itd-size-md-px:calc(var(--itd-spacing)*3);--itd-size-md-gap:calc(var(--itd-spacing)*1.5);--itd-size-md-font:var(
+      --itd-text-13
+    );--itd-size-md-field-fw:var(--itd-field-weight);--itd-size-md-icon:calc(var(--itd-spacing)*4);--itd-size-df-h:calc(var(--itd-spacing)*9.5);--itd-size-df-px:calc(var(--itd-spacing)*4);--itd-size-df-gap:calc(var(--itd-spacing)*2);--itd-size-df-font:var(
+      --itd-text-sm
+    );--itd-size-df-field-fw:var(--itd-field-weight);--itd-size-df-icon:calc(var(--itd-spacing)*4);--itd-size-lg-h:calc(var(--itd-spacing)*10);--itd-size-lg-px:calc(var(--itd-spacing)*4);--itd-size-lg-gap:calc(var(--itd-spacing)*2);--itd-size-lg-font:var(
+      --itd-text-sm
+    );--itd-size-lg-field-fw:var(--itd-field-weight);--itd-size-lg-icon:calc(var(--itd-spacing)*5);--itd-size-xlg-h:calc(var(--itd-spacing)*11);--itd-size-xlg-px:calc(var(--itd-spacing)*5);--itd-size-xlg-gap:calc(var(--itd-spacing)*2);--itd-size-xlg-font:var(
+      --itd-text-sm
+    );--itd-size-xlg-field-fw:var(--itd-field-weight);--itd-size-xlg-icon:calc(var(--itd-spacing)*6);--itd-badge-xs-font:0.625rem;--itd-gamebox-pill-font:0.75rem;--itd-gamebox-desc-font:0.6875rem;--itd-gamebox-overlay-font:0.625rem;--itd-gamebox-live-ink:#f8f8f8;--itd-carousel-title-font:0.875rem;--itd-carousel-all-font:0.6875rem;--itd-header-nav-font:0.8125rem;--itd-header-badge-font:0.5625rem;--itd-mobile-header-h:3.25rem;--itd-header-h:7.125rem;--itd-gameplay-toolbar-h:3rem;--itd-gamebox-offline-opacity:0.5;--itd-image-broken-ink:oklch(from var(--itd-color-background-alt-hover) calc(l - 0.09) c h);--itd-badge-sm-font:0.6875rem;--itd-badge-md-font:var(--itd-text-xs);--itd-badge-df-font:0.8125rem;--itd-badge-lg-font:var(--itd-text-sm);--itd-badge-xlg-font:0.9375rem;--itd-radius:var(--itd-border-radius);--itd-radius-xs:calc(var(--itd-border-radius)*0.2);--itd-radius-sm:calc(var(--itd-border-radius)*0.6);--itd-radius-md:calc(var(--itd-border-radius)*0.8);--itd-radius-lg:var(--itd-border-radius);--itd-radius-xl:calc(var(--itd-border-radius)*1.4);--itd-radius-2xl:calc(var(--itd-border-radius)*1.6);--itd-radius-control:calc(var(--itd-radius) - var(--itd-spacing)*0.5);--itd-radius-pill:calc(var(--itd-border-radius)*0.75);--itd-radius-chip:var(--itd-radius-sm);--itd-icon-stroke-width:1.5;--itd-icon-arrow-stroke-width:2.5;--itd-container-xs:20rem;--itd-container-sm:24rem;--itd-container-md:28rem;--itd-container-lg:32rem;--itd-container-xl:36rem;--itd-container-2xl:42rem;--itd-container-3xl:48rem;--itd-container-4xl:56rem;--itd-text:#333c45;--itd-text-muted:#69737d;--itd-border:#c9ced4;--itd-ring:#0089ea;--itd-ring-width:2px;--itd-ring-offset:1px;--itd-color-border-focus-ring:oklch(from var(--itd-ring) l c h/0.5);--itd-color-focus-primary-ring:oklch(from var(--itd-ring) l c h/0.5);--itd-color-error-outline:#d2004680;--itd-color-info:#029cfd;--itd-surface-box:oklch(from var(--itd-background) calc(min(l + 0.095, var(--itd-elev-box, 0.96))) c h);--itd-surface-nested:oklch(from var(--itd-background) calc(min(l + 0.095, var(--itd-elev-nested, 0.94))) c h);--itd-surface-deep:oklch(from var(--itd-background) calc(min(l + 0.095, var(--itd-elev-deep, 0.9))) c h);--itd-link:#0089ea;--itd-link-hover:#006bb9;--itd-selection-bg:#0a0a0a;--itd-selection-fg:#fff;--itd-placeholder-color:#8b9095;--itd-scrollbar-thumb:#010e1e80;--itd-scrollbar-thumb-hover:#010e1e}
+
+@supports (color: oklab(0% 0 0%)){
+:root,[data-theme=light]{--itd-gamebox-live-ink:oklch(0.98 0 0);--itd-text:oklch(0.35 0.02 250);--itd-text-muted:oklch(0.55 0.02 250);--itd-border:oklch(0.85 0.01 250)}
+}
 
-  /* ========== Smooth Scrolling (Opsiyonel) ========== */
-  /* Sadece klavye ile sayfa içi gezinmede smooth scroll */
-  html:focus-within {
-    scroll-behavior: smooth;
-  }
+@supports (color: color(display-p3 0 0 0%)){
+:root,[data-theme=light]{--itd-ring:color(display-p3 0.22139 0.52735 0.89934)}
+}
 
-  @media (prefers-reduced-motion: reduce) {
-    html:focus-within {
-      scroll-behavior: auto;
-    }
-  }
+@supports (color: oklab(0% 0 0%)){
+:root,[data-theme=light]{--itd-ring:oklch(0.62 0.18 250)}
+}
 
-  /* ========== Scrollbar Styling ========== */
-  * {
-    scrollbar-width: thin;
-    scrollbar-color: var(--itd-scrollbar-thumb) transparent;
-  }
+@supports (color: color(display-p3 0 0 0%)){
+:root,[data-theme=light]{--itd-color-error-outline:color(display-p3 0.75666 0.15768 0.28654/0.5)}
+}
 
-  *::-webkit-scrollbar {
-    width: calc(var(--itd-spacing) * 3);
-    height: calc(var(--itd-spacing) * 3);
-  }
+@supports (color: oklab(0% 0 0%)){
+:root,[data-theme=light]{--itd-color-error-outline:oklch(0.55 0.22 15/0.5);--itd-color-info:oklch(0.6746 0.1783 247.3)}
+}
 
-  *::-webkit-scrollbar-track {
-    background: transparent;
-  }
+@supports (color: color(display-p3 0 0 0%)){
+:root,[data-theme=light]{--itd-link:color(display-p3 0.22139 0.52735 0.89934)}
+}
 
-  *::-webkit-scrollbar-thumb {
-    background-color: var(--itd-scrollbar-thumb);
-    border-radius: 9999px;
-    border: 3px solid transparent;
-    background-clip: content-box;
-  }
+@supports (color: oklab(0% 0 0%)){
+:root,[data-theme=light]{--itd-link:oklch(0.62 0.18 250)}
+}
 
-  *::-webkit-scrollbar-thumb:hover {
-    background-color: var(--itd-scrollbar-thumb-hover);
-  }
+@supports (color: color(display-p3 0 0 0%)){
+:root,[data-theme=light]{--itd-link-hover:color(display-p3 0.06853 0.40451 0.76759)}
+}
 
-  /* Yüksek kontrast tercihinde scrollbar daha belirgin */
-  @media (prefers-contrast: more) {
-    :root {
-      --itd-scrollbar-thumb: oklch(0.12 0.05 250 / 0.7);
-      --itd-scrollbar-thumb-hover: oklch(0.12 0.05 250);
-    }
-    
-    [data-theme="dark"] {
-      --itd-scrollbar-thumb: oklch(0.70 0.25 256.42 / 0.7);
-      --itd-scrollbar-thumb-hover: oklch(0.70 0.25 256.42);
-    }
-  }
+@supports (color: oklab(0% 0 0%)){
+:root,[data-theme=light]{--itd-link-hover:oklch(0.52 0.18 250);--itd-selection-bg:oklch(0.145 0 0);--itd-selection-fg:oklch(1 0 0);--itd-placeholder-color:oklch(0.65 0.01 250);--itd-scrollbar-thumb:oklch(0.16 0.04 250/0.5);--itd-scrollbar-thumb-hover:oklch(0.16 0.04 250)}
+}#itd-modal-root,#itd-notification-root,#itd-tooltip-root,.itd-provider,body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--itd-text);font-family:var(--itd-font-sans);font-size-adjust:var(--itd-font-size-adjust)}.lucide{stroke-width:var(--itd-icon-stroke-width)}.lucide[class*=arrow],.lucide[class*=chevron]{stroke-width:var(--itd-icon-arrow-stroke-width)}a{border-radius:var(--itd-radius-xs);color:inherit;cursor:pointer;text-decoration-line:none;text-underline-offset:4px}a:focus-visible{outline:var(--itd-ring-width) solid var(--itd-ring);outline-offset:2px}*{border-color:var(--itd-border);outline-color:var(--itd-ring)}:focus{outline:none}:focus-visible:not(:is(input,select,textarea,button)){outline:var(--itd-ring-width) solid var(--itd-ring);outline-offset:2px}@media (prefers-contrast:more){:focus-visible{outline-width:3px}}::selection{background-color:var(--itd-selection-bg);color:var(--itd-selection-fg)}[data-theme=dark]{--itd-text:#c4cfdb;--itd-text-muted:#86909b;--itd-border:#2a2e33;--itd-ring:#51a9ff;--itd-link:#67b3ff;--itd-link-hover:#3fa3ff;--itd-selection-bg:#c4cfdb;--itd-selection-fg:#060606;--itd-placeholder-color:#7d8792;--itd-scrollbar-thumb:#2186fe80;--itd-scrollbar-thumb-hover:#2186fe;--itd-color-error-outline:#fb255a80;--itd-gamebox-offline-opacity:0.25;--itd-image-broken-ink:oklch(from var(--itd-color-background-alt-hover) calc(l + 0.09) c h);color-scheme:dark}
 
-  /* ========== Skip Link (Accessibility) ========== */
-  .skip-link {
-    position: absolute;
-    inset-inline-start: 0;
-    inset-block-start: 0;
-    transform: translateY(-150%);
-    background: Canvas;
-    color: CanvasText;
-    padding: calc(var(--itd-spacing) * 2) calc(var(--itd-spacing) * 4);
-    z-index: 9999;
-    text-decoration: none;
-    border-radius: var(--itd-spacing);
-  }
+@supports (color: oklab(0% 0 0%)){
+[data-theme=dark]{--itd-text:oklch(0.85 0.02 250);--itd-text-muted:oklch(0.65 0.02 250);--itd-border:oklch(0.3 0.01 250)}
+}
 
-  .skip-link:focus {
-    transform: translateY(0);
-    outline: 2px solid var(--itd-ring);
-    outline-offset: 2px;
-  }
+@supports (color: color(display-p3 0 0 0%)){
+[data-theme=dark]{--itd-ring:color(display-p3 0.38251 0.65518 1)}
+}
 
-  /* ================================= */
-  /* THEME TRANSITION KILLER           */
-  /* ================================= */
-  .itd-no-transition,
-  .itd-no-transition *,
-  .itd-no-transition *::before,
-  .itd-no-transition *::after {
-    transition: none !important;
-  }
+@supports (color: oklab(0% 0 0%)){
+[data-theme=dark]{--itd-ring:oklch(0.72 0.2 250)}
+}
 
+@supports (color: color(display-p3 0 0 0%)){
+[data-theme=dark]{--itd-link:color(display-p3 0.45541 0.6948 1)}
 }
 
-/* ================================= */
-/* COMPONENT SIZE CLASSES            */
-/* Tüm interactive component'lar     */
-/* (Button, Input, Select, vb.) bu   */
-/* class'ları ortak kullanır.        */
-/* ================================= */
-@layer components {
+@supports (color: oklab(0% 0 0%)){
+[data-theme=dark]{--itd-link:oklch(0.75 0.2 250)}
+}
 
-  .itd-size-xs {
-    height: var(--itd-size-xs-h);
-    padding-inline: var(--itd-size-xs-px);
-    gap: var(--itd-size-xs-gap);
-    font-size: var(--itd-size-xs-font);
-    font-weight: var(--itd-font-weight-medium);
-  }
+@supports (color: color(display-p3 0 0 0%)){
+[data-theme=dark]{--itd-link-hover:color(display-p3 0.33089 0.6281 1)}
+}
 
-  .itd-size-sm {
-    height: var(--itd-size-sm-h);
-    padding-inline: var(--itd-size-sm-px);
-    gap: var(--itd-size-sm-gap);
-    font-size: var(--itd-size-sm-font);
-    font-weight: var(--itd-font-weight-medium);
-  }
+@supports (color: oklab(0% 0 0%)){
+[data-theme=dark]{--itd-link-hover:oklch(0.7 0.2 250);--itd-selection-bg:oklch(0.85 0.02 250);--itd-selection-fg:oklch(0.12 0 0);--itd-placeholder-color:oklch(0.62 0.02 250);--itd-scrollbar-thumb:oklch(0.63 0.2 256.42/0.5);--itd-scrollbar-thumb-hover:oklch(0.63 0.2 256.42);--itd-color-error-outline:oklch(0.64 0.24 15.26/0.5)}
+}html:focus-within{scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}}:root{--itd-z-overlay:1000;--itd-z-sheet:1001;--itd-z-dialog:1002;--itd-z-modal:1002;--itd-z-popover:1050;--itd-z-toast:1080}*{scrollbar-color:var(--itd-scrollbar-thumb) #0000;scrollbar-width:thin}::-webkit-scrollbar{height:calc(var(--itd-spacing)*3);width:calc(var(--itd-spacing)*3)}::-webkit-scrollbar-track{background:#0000}::-webkit-scrollbar-thumb{background-clip:content-box;background-color:var(--itd-scrollbar-thumb);border:3px solid #0000;border-radius:9999px}::-webkit-scrollbar-thumb:hover:where(:root:not(.itd-touch) *){background-color:var(--itd-scrollbar-thumb-hover)}@media (prefers-contrast:more){:root{--itd-scrollbar-thumb:#000612b3;--itd-scrollbar-thumb-hover:#000612}
 
-  .itd-size-md {
-    height: var(--itd-size-md-h);
-    padding-inline: var(--itd-size-md-px);
-    gap: var(--itd-size-md-gap);
-    font-size: var(--itd-size-md-font);
-    font-weight: var(--itd-font-weight-medium);
-  }
+@supports (color: color(display-p3 0 0 0%)){
+:root{--itd-scrollbar-thumb:color(display-p3 0 0.02116 0.07988/0.7)}
+}
 
-  .itd-size-df {
-    height: var(--itd-size-df-h);
-    padding-inline: var(--itd-size-df-px);
-    gap: var(--itd-size-df-gap);
-    font-size: var(--itd-size-df-font);
-    font-weight: var(--itd-font-weight-medium);
-  }
+@supports (color: oklab(0% 0 0%)){
+:root{--itd-scrollbar-thumb:oklch(0.12 0.05 250/0.7)}
+}
 
-  .itd-size-lg {
-    height: var(--itd-size-lg-h);
-    padding-inline: var(--itd-size-lg-px);
-    gap: var(--itd-size-lg-gap);
-    font-size: var(--itd-size-lg-font);
-    font-weight: var(--itd-font-weight-medium);
-  }
+@supports (color: color(display-p3 0 0 0%)){
+:root{--itd-scrollbar-thumb-hover:color(display-p3 0 0.02116 0.07988)}
+}
 
-  .itd-size-xlg {
-    height: var(--itd-size-xlg-h);
-    padding-inline: var(--itd-size-xlg-px);
-    gap: var(--itd-size-xlg-gap);
-    font-size: var(--itd-size-xlg-font);
-    font-weight: var(--itd-font-weight-medium);
-  }
+@supports (color: oklab(0% 0 0%)){
+:root{--itd-scrollbar-thumb-hover:oklch(0.12 0.05 250)}
+}[data-theme=dark]{--itd-scrollbar-thumb:#579fffb3;--itd-scrollbar-thumb-hover:#579fff}
 
+@supports (color: color(display-p3 0 0 0%)){
+[data-theme=dark]{--itd-scrollbar-thumb:color(display-p3 0.39074 0.61352 1/0.7)}
 }
 
-/* ================================= */
-/* SPINNER ANIMATION                 */
-/* ================================= */
-@keyframes itd-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+@supports (color: oklab(0% 0 0%)){
+[data-theme=dark]{--itd-scrollbar-thumb:oklch(0.7 0.25 256.42/0.7)}
 }
 
-.animate-spin {
-  animation: itd-spin 0.75s linear infinite;
+@supports (color: color(display-p3 0 0 0%)){
+[data-theme=dark]{--itd-scrollbar-thumb-hover:color(display-p3 0.39074 0.61352 1)}
 }
+
+@supports (color: oklab(0% 0 0%)){
+[data-theme=dark]{--itd-scrollbar-thumb-hover:oklch(0.7 0.25 256.42)}
+}}.skip-link{background:Canvas;border-radius:var(--itd-spacing);color:initial;inset-block-start:0;inset-inline-start:0;padding:calc(var(--itd-spacing)*2) calc(var(--itd-spacing)*4);position:absolute;text-decoration:none;transform:translateY(-150%);z-index:9999}.skip-link:focus{outline:var(--itd-ring-width) solid var(--itd-ring);outline-offset:2px;transform:translateY(0)}.itd-no-transition,.itd-no-transition *,.itd-no-transition :after,.itd-no-transition :before{transition:none!important}[data-itd-elevation=raised] :where(.itd-card,.itd-casino-panel,.itd-block-form-item)>*{--itd-color-background-input:var(--itd-color-background-panel);--itd-input-addon-bg:oklch(from var(--itd-color-background-panel) calc(l - 0.045) c h)}}@layer components{.itd-size-xs{font-size:var(--itd-size-xs-font);gap:var(--itd-size-xs-gap);height:var(--itd-size-xs-h);padding-inline:var(--itd-size-xs-px)}.itd-size-sm,.itd-size-xs{font-weight:var(--itd-font-weight-medium)}.itd-size-sm{font-size:var(--itd-size-sm-font);gap:var(--itd-size-sm-gap);height:var(--itd-size-sm-h);padding-inline:var(--itd-size-sm-px)}.itd-size-md{font-size:var(--itd-size-md-font);gap:var(--itd-size-md-gap);height:var(--itd-size-md-h);padding-inline:var(--itd-size-md-px)}.itd-size-df,.itd-size-md{font-weight:var(--itd-font-weight-medium)}.itd-size-df{font-size:var(--itd-size-df-font);gap:var(--itd-size-df-gap);height:var(--itd-size-df-h);padding-inline:var(--itd-size-df-px)}.itd-size-lg{font-size:var(--itd-size-lg-font);gap:var(--itd-size-lg-gap);height:var(--itd-size-lg-h);padding-inline:var(--itd-size-lg-px)}.itd-size-lg,.itd-size-xlg{font-weight:var(--itd-font-weight-medium)}.itd-size-xlg{font-size:var(--itd-size-xlg-font);gap:var(--itd-size-xlg-gap);height:var(--itd-size-xlg-h);padding-inline:var(--itd-size-xlg-px)}}@keyframes itd-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.animate-spin{animation:itd-spin .75s linear infinite}@layer base{:root.itd-touch{-webkit-tap-highlight-color:transparent}:root.itd-touch :is(button,[role=button],a,label,summary){-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}}

package/dist/css/block-form.css

@@ -0,0 +1,3 @@
+@layer components{.itd-block-form{display:flex;flex-direction:column;gap:var(--itd-block-form-gap,calc(var(--itd-spacing)*4))}.itd-block-form-row{display:flex;flex-direction:column;gap:calc(var(--itd-spacing)*1.5)}.itd-block-form-label{color:var(--itd-color-text);font-size:var(--itd-text-sm);font-weight:var(--itd-font-weight-medium)}.itd-block-form-compact .itd-block-form-label{font-size:var(--itd-text-xs);font-weight:var(--itd-font-weight-semibold)}.itd-block-form-hint{color:var(--itd-color-text-muted);font-size:var(--itd-text-xs);line-height:var(--itd-text-xs--line-height);margin:0}.itd-block-form-label-stack{display:flex;flex-direction:column}.itd-block-form-description{color:var(--itd-color-text-muted);font-size:var(--itd-text-xs);line-height:var(--itd-text-xs--line-height);margin:0}.itd-block-form-info{align-items:center;color:var(--itd-color-text-muted);cursor:help;display:inline-flex;margin-inline-start:var(--itd-spacing)}.itd-block-form-label:has(.itd-block-form-info){align-items:center;display:inline-flex}.itd-block-form-info svg{height:.875rem;width:.875rem}.itd-block-form-info:hover:where(:root:not(.itd-touch) *){color:var(--itd-color-text)}.itd-block-form-info-target{cursor:help}.itd-block-form-info-title{color:var(--itd-color-text);display:block;font-size:var(--itd-text-sm);font-weight:var(--itd-font-weight-semibold);margin-block-end:calc(var(--itd-spacing)*1)}.itd-block-form-info-body{color:var(--itd-color-text-muted);display:block;font-size:var(--itd-text-xs);line-height:var(--itd-text-xs--line-height)}.itd-block-form-stack{display:flex;flex-direction:column;gap:calc(var(--itd-spacing)*2)}.itd-block-form-items{display:flex;flex-direction:column;gap:calc(var(--itd-spacing)*3)}.itd-block-form-item{background-color:var(--itd-block-form-item-bg,var(--itd-card));border:1px solid var(--itd-block-form-item-border,var(--itd-surface-hairline,#0000));border-radius:var(--itd-radius-md);display:flex;flex-direction:column;gap:calc(var(--itd-spacing)*2);padding:calc(var(--itd-spacing)*3);position:relative}.itd-block-form-item-grip{align-items:center;color:var(--itd-color-text-muted);cursor:grab;display:inline-flex;inset-inline-start:calc(var(--itd-spacing)*3);position:absolute;top:calc(var(--itd-spacing)*3 + .125rem);touch-action:none}.itd-block-form-item-grip svg{height:1rem;width:1rem}.itd-block-form-item-grip~.itd-block-form-row:first-of-type>.itd-block-form-label-stack>.itd-block-form-label{padding-inline-start:calc(var(--itd-spacing)*5.5)}.itd-block-form-item-remove{inset-inline-end:calc(var(--itd-spacing)*1.5);position:absolute;top:calc(var(--itd-spacing)*1.5)}.itd-block-form-item[data-dragging]{opacity:.92;position:relative;z-index:5}.itd-block-form-items[data-carrying] .itd-block-form-item *{pointer-events:none!important}.itd-block-form-items[data-carrying]{cursor:grabbing;user-select:none;-webkit-user-select:none}.itd-block-form-pick{display:flex;flex-direction:column;gap:calc(var(--itd-spacing)*2);min-width:0}.itd-block-form-pick>.itd-select{min-width:0;width:100%}.itd-block-form-pick-add{align-items:stretch;display:flex;gap:calc(var(--itd-spacing)*1.5)}.itd-block-form-pick-add>.itd-select{flex:1;min-width:0}.itd-block-form-pick-add-btn.itd-button{flex:none;height:auto;white-space:nowrap}.itd-block-form-pick-empty{background-color:var(--itd-block-form-item-bg,var(--itd-card));border:1px solid var(--itd-block-form-item-border,var(--itd-surface-hairline,#0000));border-radius:var(--itd-radius-sm);color:var(--itd-color-text-muted);font-size:var(--itd-text-13);padding:calc(var(--itd-spacing)*3);text-align:center}.itd-block-form-pick-list{display:flex;flex-direction:column;gap:calc(var(--itd-spacing)*1)}.itd-block-form-pick-row{align-items:center;background-color:var(--itd-block-form-item-bg,var(--itd-card));border:1px solid var(--itd-block-form-item-border,var(--itd-surface-hairline,#0000));border-radius:var(--itd-radius-sm);display:flex;gap:calc(var(--itd-spacing)*1.5);padding:calc(var(--itd-spacing)*1) calc(var(--itd-spacing)*1.5)}.itd-block-form-pick-row[data-dragging]{box-shadow:var(--itd-floating-shadow);position:relative;z-index:2}.itd-block-form-pick-row[data-outside] .itd-block-form-pick-name{color:var(--itd-color-text-muted);text-decoration:line-through}.itd-block-form-pick-grip{align-items:center;color:var(--itd-color-text-muted);cursor:grab;display:inline-flex;touch-action:none}.itd-block-form-pick-grip svg{height:1rem;width:1rem}.itd-block-form-pick-name{flex:1;font-size:var(--itd-text-13);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.itd-block-form-pick-note{color:var(--itd-color-text-muted);flex:none;font-size:var(--itd-text-xs)}.itd-block-form-pick-remove{flex:none}.itd-block-form-pick-count{align-self:flex-end;color:var(--itd-color-text-muted);font-size:var(--itd-text-xs)}.itd-block-form-pick-list[data-carrying]{cursor:grabbing;user-select:none;-webkit-user-select:none}.itd-block-form-pick-list[data-carrying] .itd-block-form-pick-row *{pointer-events:none!important}.itd-block-preview{background-color:var(--itd-block-preview-bg,var(--itd-color-background-alt));isolation:isolate;overflow:hidden;position:relative}.itd-block-preview .itd-skeleton{background:var(--itd-block-preview-fill,var(--itd-color-background-alt-hover))!important}.itd-block-preview .itd-skeleton:after{content:none!important}.itd-block-preview-spacer{background:repeating-linear-gradient(-45deg,#0000,#0000 6px,var(--itd-color-background-alt-hover) 6px,var(--itd-color-background-alt-hover) 12px)}.itd-editor-ghost .itd-block-preview:not(.itd-block-preview-spacer){background:#0000}.itd-block-preview-stage{inset-block-start:0;inset-inline-start:0;pointer-events:none;position:absolute;transform-origin:top left;-webkit-user-select:none;user-select:none}.itd-code-editor{display:flex;flex-direction:column;gap:calc(var(--itd-spacing)*1.5);width:100%}.itd-code-editor-body{background-color:var(--itd-code-editor-bg,var(--itd-color-background-alt));border-radius:var(--itd-radius-md);display:flex;overflow:hidden;position:relative}.itd-code-editor[data-error] .itd-code-editor-body{box-shadow:inset 0 0 0 1px var(--itd-color-error)}.itd-code-editor-gutter{background:none;border:0;color:var(--itd-color-text-muted);flex:none;font-family:var(--itd-font-mono,ui-monospace,Menlo,monospace);font-size:var(--itd-text-xs);line-height:1.6;margin:0;overflow:hidden;padding-block:calc(var(--itd-spacing)*3);padding-inline:calc(var(--itd-spacing)*2);text-align:end;-webkit-user-select:none;user-select:none}.itd-code-editor-stack{display:grid;flex:1;min-width:0;position:relative}.itd-code-editor-input,.itd-code-editor-paint{border:0;font-family:var(--itd-font-mono,ui-monospace,Menlo,monospace);font-size:var(--itd-text-xs);grid-area:1/1;line-height:1.6;margin:0;overflow:auto;overflow-wrap:normal;padding:calc(var(--itd-spacing)*3) calc(var(--itd-spacing)*9) calc(var(--itd-spacing)*3) 0;tab-size:2;white-space:pre}.itd-code-editor-paint{background:none;color:var(--itd-code-editor-ink,var(--itd-color-text));pointer-events:none}.itd-code-editor-paint>code{background:none;font:inherit}.itd-code-editor-input{background:none;caret-color:var(--itd-code-editor-ink,var(--itd-color-text));color:#0000;resize:none}}@layer components{.itd-code-editor-input::selection{background-color:color-mix(in oklch,var(--itd-primary) 35%,#0000)}.itd-code-editor-input::placeholder{color:var(--itd-color-text-muted)}.itd-code-editor .token.cdata,.itd-code-editor .token.comment,.itd-code-editor .token.doctype,.itd-code-editor .token.prolog{color:var(--itd-color-text-muted);font-style:italic}.itd-code-editor .token.atrule,.itd-code-editor .token.attr-name,.itd-code-editor .token.function,.itd-code-editor .token.keyword,.itd-code-editor .token.property,.itd-code-editor .token.selector,.itd-code-editor .token.tag{color:var(--itd-primary)}.itd-code-editor .token.attr-value,.itd-code-editor .token.string,.itd-code-editor .token.url{color:var(--itd-color-success)}.itd-code-editor .token.boolean,.itd-code-editor .token.hexcode,.itd-code-editor .token.number,.itd-code-editor .token.unit{color:var(--itd-color-alert-warning-title,var(--itd-color-text))}.itd-code-editor .token.deleted,.itd-code-editor .token.important{color:var(--itd-color-error)}.itd-code-editor .token.operator,.itd-code-editor .token.punctuation{color:var(--itd-color-text-muted)}.itd-code-editor-input:focus-visible{outline:var(--itd-ring-width) solid var(--itd-color-border-focus-ring);outline-offset:calc(var(--itd-ring-offset)*-1)}.itd-code-editor-expand{align-items:center;background-color:var(--itd-color-background);border:0;border-radius:var(--itd-radius-sm);color:var(--itd-color-text-muted);cursor:pointer;display:inline-flex;height:calc(var(--itd-spacing)*7);inset-block-start:calc(var(--itd-spacing)*2);inset-inline-end:calc(var(--itd-spacing)*2);justify-content:center;padding:0;position:absolute;width:calc(var(--itd-spacing)*7)}.itd-code-editor-expand>svg{height:calc(var(--itd-spacing)*3.5);width:calc(var(--itd-spacing)*3.5)}.itd-code-editor-expand:hover:where(:root:not(.itd-touch) *){color:var(--itd-color-text)}.itd-code-editor-full{background-color:var(--itd-color-background);inset:0;padding:calc(var(--itd-spacing)*4);position:fixed;z-index:2147483001}.itd-code-editor-full .itd-code-editor-body{flex:1;min-height:0}.itd-code-editor-full .itd-code-editor-stack{height:100%}.itd-editor-flag{background-color:var(--itd-color-alert-warning-title,currentColor);border-radius:9999px;flex:none;height:.4375rem;margin-inline-start:calc(var(--itd-spacing)*1.5);width:.4375rem}.itd-editor-flag[data-level=error]{background-color:var(--itd-color-alert-error-title,currentColor)}.itd-editor-checks-badge{background-color:var(--_level);inset-block-end:calc(var(--itd-spacing)*4);inset-inline-end:calc(var(--itd-spacing)*4);position:absolute;z-index:30}.itd-editor-checks-badge,.itd-editor-checks-badge svg{color:oklch(from var(--_level) .18 c h)}.itd-editor-checks-badge:hover:where(:root:not(.itd-touch) *){background-color:oklch(from var(--_level) calc(l + .06) c h)}.itd-editor-checks-badge{transition:transform .18s cubic-bezier(.4,0,.2,1),opacity .18s linear}.itd-editor-checks-badge[data-going=swell]{transform:scale(1.1)}.itd-editor-checks-badge[data-going=away]{opacity:0;pointer-events:none;transform:scale(.3)}.itd-editor-checks-panel{background:var(--itd-color-background-dialog,var(--itd-color-background-modal));border-radius:var(--itd-radius-md);box-shadow:var(--itd-floating-shadow);color:var(--itd-card-foreground);display:flex;flex-direction:column;height:25rem;inset-block-end:calc(var(--itd-spacing)*4);inset-inline-end:calc(var(--itd-spacing)*4);max-height:calc(100% - var(--itd-spacing)*8);position:absolute;transform-origin:bottom right;transition:transform .18s cubic-bezier(.4,0,.2,1),opacity .18s linear;width:18.75rem;z-index:31}.itd-editor-checks-panel[data-state=leaving],.itd-editor-checks-panel[data-state=opening]{opacity:0;transform:scale(.3)}.itd-editor-checks-head{align-items:center;display:flex;gap:calc(var(--itd-spacing)*2);padding:calc(var(--itd-spacing)*3) calc(var(--itd-spacing)*3) calc(var(--itd-spacing)*2) calc(var(--itd-spacing)*4)}.itd-editor-checks-list{display:flex;flex-direction:column;gap:calc(var(--itd-spacing)*2);overflow:auto;padding:0 calc(var(--itd-spacing)*3) calc(var(--itd-spacing)*3)}.itd-editor-checks-go{color:inherit;display:inline-flex;height:auto;margin-block-start:calc(var(--itd-spacing)*1.5);min-height:0;padding:0;text-decoration:underline;text-underline-offset:.2em}.itd-editor-grip{background-color:var(--itd-color-border);cursor:col-resize;flex:none;opacity:.35;touch-action:none;width:calc(var(--itd-spacing)*1.5)}}@layer components{.itd-editor-grip:hover:where(:root:not(.itd-touch) *){background-color:var(--itd-primary);opacity:1}.itd-editor-pane-edge{background-color:oklch(from var(--itd-background) .94 c h);inset-block:0;inset-inline-start:0;pointer-events:none;position:absolute;width:1px}:root[data-theme=dark] .itd-editor-pane-edge{background-color:oklch(from var(--itd-background) .32 c h)}.itd-editor-unsaved{background-color:var(--itd-color-alert-warning-title,currentColor);border-radius:9999px;flex:none;height:.5rem;width:.5rem}.itd-editor-delete{--itd-primary:var(--itd-color-error);--itd-primary-hover:color-mix(in oklab,var(--itd-color-error) 82%,var(--itd-color-text));--itd-primary-foreground:var(--itd-color-error-text)}.itd-editor-toolbar .itd-button-solid{background-color:var(--itd-color-background-input,var(--itd-color-background-alt))}}@layer components{.itd-editor-toolbar .itd-button-solid:hover:where(:root:not(.itd-touch) *){background-color:var(--itd-color-background-alt-hover)}}@layer components{.itd-editor-chip{background-color:var(--itd-color-background-input,var(--itd-color-background-alt));border:2px solid #0000;border-radius:var(--itd-radius-md);color:var(--itd-color-text);cursor:pointer;display:flex;flex-direction:column;font-size:var(--itd-text-xs);padding:calc(var(--itd-spacing)*2);transition:border-color .12s ease;-webkit-user-select:none;user-select:none}.itd-editor-chip:hover:where(:root:not(.itd-touch) *){border-color:var(--itd-primary)}.itd-editor-chip[aria-selected=true]{background-color:var(--itd-primary);color:var(--itd-primary-foreground)}.itd-editor-chip[aria-disabled=true]{opacity:.45}.itd-editor-chip-eye{background:none;border:0;color:inherit;cursor:pointer;display:inline-flex;opacity:.5;padding:0}.itd-editor-chip-eye:focus-visible,.itd-editor-chip:hover:where(:root:not(.itd-touch) *) .itd-editor-chip-eye{opacity:1}.itd-editor-layout-card{border:2px solid #0000;color:inherit;cursor:pointer;font:inherit;text-align:inherit;transition:border-color .12s ease;-webkit-user-select:none;user-select:none}.itd-editor-layout-card:hover:where(:root:not(.itd-touch) *){border-color:var(--itd-primary)}.itd-editor-layout-strip{position:relative}.itd-editor-layout-scroller{align-items:stretch;cursor:grab;display:flex;gap:1rem;overflow-x:auto;scrollbar-width:none}.itd-editor-layout-scroller::-webkit-scrollbar{display:none}.itd-editor-layout-nav{border-radius:50%;inset-block-start:50%;position:absolute;translate:0 -50%;z-index:2}.itd-editor-layout-nav[data-side=start]{inset-inline-start:-2.85rem}.itd-editor-layout-nav[data-side=end]{inset-inline-end:-2.85rem}.itd-editor-modal .itd-modal-header{padding:calc(var(--itd-spacing)*10) calc(var(--itd-spacing)*15) 0}.itd-editor-modal .itd-modal-middle-content{padding:var(
+      --itd-modal-content-padding,calc(var(--itd-spacing)*6) calc(var(--itd-spacing)*15) calc(var(--itd-spacing)*15)
+    )}.itd-editor-layout-thumb{height:15.75rem;overflow:hidden}.itd-editor-layout-reel{--itd-block-preview-fill:oklch(from var(--itd-color-background-alt-hover) calc(l - 0.04 * round(l)) c h);display:flex;flex-direction:column;gap:1px;pointer-events:none;transition:transform .6s ease}.itd-editor-layout-card:hover:where(:root:not(.itd-touch) *) .itd-editor-layout-reel{transform:translateY(min(0px,calc(15.75rem - 100%)));transition:transform 4s ease-in-out}:is(.itd-editor-layout-reel,.itd-block-preview) :is(.itd-box-title,.itd-casino-panel-head)>*{display:none!important}:is(.itd-editor-layout-reel,.itd-block-preview) :is(.itd-box-title,.itd-casino-panel-head){--itd-preview-title-bar:14rem;align-items:center;display:flex!important;gap:.75rem}:is(.itd-editor-layout-reel,.itd-block-preview) .itd-casino-panel-head{--itd-preview-title-bar:7rem}:is(.itd-editor-layout-reel,.itd-block-preview) :is(.itd-box-title,.itd-casino-panel-head):before{background:var(--itd-block-preview-fill,var(--itd-color-background-alt-hover));border-radius:50%;content:"";flex:none;height:2rem;width:2rem}:is(.itd-editor-layout-reel,.itd-block-preview) :is(.itd-box-title,.itd-casino-panel-head):after{background:var(--itd-block-preview-fill,var(--itd-color-background-alt-hover));border-radius:.5625rem;content:"";flex:none;height:1.125rem;width:var(--itd-preview-title-bar)}:is(.itd-editor-layout-reel,.itd-block-preview) .itd-game-providers-reset{display:none!important}:is(.itd-editor-layout-reel,.itd-block-preview) .itd-filter-tab{color:#0000!important}.itd-block-preview :is(.itd-help-rail,.itd-help-title){position:static!important}:is(.itd-editor-room,.itd-editor-canvas-veil){background:var(--itd-background)}:root[data-theme=dark] :is(.itd-editor-room,.itd-editor-canvas-veil){background:oklch(from var(--itd-background) .23 c h)}:root[data-theme=light]:not([data-itd-elevation=raised]) :is(.itd-editor-room,.itd-editor-canvas-veil){background:oklch(from var(--itd-background) .96 c h)}.itd-editor-canvas-veil{color:var(--itd-color-text-muted);display:grid;inset:0;place-items:center;position:absolute;z-index:1}.itd-editor-canvas-veil[data-gone]{opacity:0;pointer-events:none;transition:opacity .24s ease,visibility 0s linear .24s;visibility:hidden}.itd-editor-setting-card{background:var(--itd-color-background-input,var(--itd-color-background-alt));border-radius:var(--itd-radius-md);display:flex;flex-direction:column;gap:calc(var(--itd-spacing)*2);padding:calc(var(--itd-spacing)*2)}.itd-editor-setting-card>:not(:last-child){border-bottom:1px solid color-mix(in srgb,var(--itd-color-text) 8%,#0000);padding-bottom:calc(var(--itd-spacing)*2)}.itd-editor-setting-card .itd-input.itd-input-filled{background-color:color-mix(in srgb,var(--itd-color-text) 6%,var(--itd-color-background-input,var(--itd-color-background-alt)))}.itd-block-form-half-pair{align-items:start;display:grid;gap:calc(var(--itd-spacing)*2);grid-template-columns:1fr 1fr}.itd-editor-site-pane{animation:itd-editor-site-pane-in .2s ease}@keyframes itd-editor-site-pane-in{0%{margin-inline-end:-22.5rem}to{margin-inline-end:0}}.itd-block-form-hideable{align-items:center;display:flex;gap:calc(var(--itd-spacing)*1.5)}.itd-block-form-hideable>:first-child{flex:1;min-width:0}.itd-block-form-eye{background:none;border:0;color:inherit;cursor:pointer;display:inline-flex;flex:none;opacity:.5;padding:0}.itd-block-form-eye svg{height:1rem;width:1rem}.itd-block-form-eye:focus-visible,.itd-block-form-eye:hover:where(:root:not(.itd-touch) *),.itd-block-form-eye[aria-pressed=true]{opacity:1}}@layer components{.itd-editor-empty{background-color:var(--itd-color-background-alt);border-radius:var(--itd-radius-md);color:var(--itd-color-text-muted);font-size:var(--itd-text-xs);line-height:1.55;margin:0;padding:calc(var(--itd-spacing)*3)}}

package/dist/css/blocks-shared.css

@@ -0,0 +1,13 @@
+@layer components{:root{--itd-box-wash:var(
+      --site-box-wash,color-mix(in srgb,var(--itd-color-background-modal) 75%,#0000)
+    )}:root[data-theme=light]:not([data-itd-elevation=raised]){--itd-box-wash:var(
+      --site-box-wash,color-mix(in srgb,oklch(from var(--itd-background) 0.94 c h) 75%,#0000)
+    )}:root[data-itd-elevation=raised]{--itd-box-wash:color-mix(in srgb,oklch(from var(--itd-background) 1 c h) 75%,#0000)}:root{--itd-panel-scroll-thumb:var(--site-panel-scroll-thumb,#ffffff21)}
+
+@supports (color: oklab(0% 0 0%)){
+:root{--itd-panel-scroll-thumb:var(--site-panel-scroll-thumb,oklch(1 0 0/0.13))}
+}:root[data-theme=light]{--itd-panel-scroll-thumb:var(--site-panel-scroll-thumb,#0003)}
+
+@supports (color: oklab(0% 0 0%)){
+:root[data-theme=light]{--itd-panel-scroll-thumb:var(--site-panel-scroll-thumb,oklch(0 0 0/0.2))}
+}}

package/dist/css/button-group.css

@@ -0,0 +1 @@
+@layer components{.itd-button-group-default,.itd-button-group-filled{align-items:stretch;display:inline-flex;width:fit-content}.itd-button-group-vertical.itd-button-group-default,.itd-button-group-vertical.itd-button-group-filled{flex-direction:column}.itd-button-group:has(>.itd-button-group){gap:calc(var(--itd-spacing)*2)}:is(.itd-button-group-default,.itd-button-group-filled).itd-button-group-horizontal>.itd-button-group-text:not(:last-child),:is(.itd-button-group-default,.itd-button-group-filled).itd-button-group-horizontal>.itd-button:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}:is(.itd-button-group-default,.itd-button-group-filled).itd-button-group-horizontal>.itd-button-group-text:not(:first-child),:is(.itd-button-group-default,.itd-button-group-filled).itd-button-group-horizontal>.itd-button:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}:is(.itd-button-group-default,.itd-button-group-filled).itd-button-group-vertical>.itd-button-group-text:not(:last-child),:is(.itd-button-group-default,.itd-button-group-filled).itd-button-group-vertical>.itd-button:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0}:is(.itd-button-group-default,.itd-button-group-filled).itd-button-group-vertical>.itd-button-group-text:not(:first-child),:is(.itd-button-group-default,.itd-button-group-filled).itd-button-group-vertical>.itd-button:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}.itd-button-group-default>.itd-button:focus-visible,.itd-button-group-default>.itd-button:hover:where(:root:not(.itd-touch) *),.itd-button-group-default>.itd-button[aria-expanded=true]{position:relative;z-index:1}.itd-button-group-default.itd-button-group-horizontal>.itd-button-group-text:not(:first-child),.itd-button-group-default.itd-button-group-horizontal>.itd-button:not(:first-child){margin-left:-1px}.itd-button-group-default.itd-button-group-vertical>.itd-button-group-text:not(:first-child),.itd-button-group-default.itd-button-group-vertical>.itd-button:not(:first-child){margin-top:-1px}.itd-button-group-filled>.itd-button,.itd-button-group-filled>.itd-button:focus-visible,.itd-button-group-filled>.itd-button:hover:where(:root:not(.itd-touch) *),.itd-button-group-filled>.itd-button[aria-expanded=true]{border-color:#0000;box-shadow:none}.itd-button-group-filled>.itd-button{background-color:var(--itd-color-background-alt)}.itd-button-group-filled>.itd-button:focus-visible,.itd-button-group-filled>.itd-button:hover:where(:root:not(.itd-touch) *),.itd-button-group-filled>.itd-button[aria-expanded=true]{background-color:var(--itd-color-background-alt-hover)}.itd-button-group-filled.itd-button-group-horizontal>.itd-button-group-text:not(:last-child),.itd-button-group-filled.itd-button-group-horizontal>.itd-button:not(:last-child){border-right-color:var(--itd-color-border)}.itd-button-group-filled.itd-button-group-vertical>.itd-button-group-text:not(:last-child),.itd-button-group-filled.itd-button-group-vertical>.itd-button:not(:last-child){border-bottom-color:var(--itd-color-border)}.itd-button-group-text{align-items:center;background-color:var(--itd-muted);border:1px solid var(--itd-color-border);border-radius:calc(var(--itd-border-radius)*.8);box-sizing:border-box;color:var(--itd-color-text);display:inline-flex;-webkit-user-select:none;user-select:none;white-space:nowrap}.itd-button-group-text svg{flex:none;height:1rem;pointer-events:none;width:1rem}}