@skygraph/styles 0.6.4 → 0.6.6

package/index.css

@@ -1,70 +1,70 @@
-/* SkyGraph -- all styles */
-@import './tokens.css';
-@import './reset.css';
-@import './components/button.css';
-@import './components/input.css';
-@import './components/textarea.css';
-@import './components/input-number.css';
-@import './components/form.css';
-@import './components/field.css';
-@import './components/autofield.css';
-@import './components/spin.css';
-@import './components/modal.css';
-@import './components/checkbox.css';
-@import './components/radio.css';
-@import './components/switch.css';
-@import './components/select.css';
-@import './components/tabs.css';
-@import './components/tooltip.css';
-@import './components/table.css';
-@import './components/datagrid.css';
-@import './components/datepicker.css';
-@import './components/timepicker.css';
-@import './components/autocomplete.css';
-@import './components/slider.css';
-@import './components/rate.css';
-@import './components/upload.css';
-@import './components/notification.css';
-@import './components/drawer.css';
-@import './components/popconfirm.css';
-@import './components/badge.css';
-@import './components/tag.css';
-@import './components/avatar.css';
-@import './components/breadcrumb.css';
-@import './components/pagination.css';
-@import './components/dropdown.css';
-@import './components/progress.css';
-@import './components/tree.css';
-@import './components/treeselect.css';
-@import './components/cascader.css';
-@import './components/calendar.css';
-@import './components/list.css';
-@import './components/transfer.css';
-@import './components/menu.css';
-@import './components/context-menu.css';
-@import './components/collapse.css';
-@import './components/colorpicker.css';
-@import './components/empty.css';
-@import './components/result.css';
-@import './components/skeleton.css';
-@import './components/segmented.css';
-@import './components/steps.css';
-@import './components/timeline.css';
-@import './components/carousel.css';
-@import './components/descriptions.css';
-@import './components/mentions.css';
-@import './components/input-password.css';
-@import './components/search-input.css';
-@import './components/tag-input.css';
-@import './components/pin-input.css';
-@import './components/inline-edit.css';
-@import './components/input-group.css';
-@import './components/diagram.css';
-@import './components/charts.css';
-@import './components/dashboard.css';
-@import './components/gantt.css';
-@import './components/resource-calendar.css';
-@import './components/event-timeline.css';
-@import './components/schema-form-editor.css';
-@import './transitions.css';
-@import './print.css';
+/* SkyGraph -- all styles */
+@import './tokens.css';
+@import './reset.css';
+@import './components/button.css';
+@import './components/input.css';
+@import './components/textarea.css';
+@import './components/input-number.css';
+@import './components/form.css';
+@import './components/field.css';
+@import './components/autofield.css';
+@import './components/spin.css';
+@import './components/modal.css';
+@import './components/checkbox.css';
+@import './components/radio.css';
+@import './components/switch.css';
+@import './components/select.css';
+@import './components/tabs.css';
+@import './components/tooltip.css';
+@import './components/table.css';
+@import './components/datagrid.css';
+@import './components/datepicker.css';
+@import './components/timepicker.css';
+@import './components/autocomplete.css';
+@import './components/slider.css';
+@import './components/rate.css';
+@import './components/upload.css';
+@import './components/notification.css';
+@import './components/drawer.css';
+@import './components/popconfirm.css';
+@import './components/badge.css';
+@import './components/tag.css';
+@import './components/avatar.css';
+@import './components/breadcrumb.css';
+@import './components/pagination.css';
+@import './components/dropdown.css';
+@import './components/progress.css';
+@import './components/tree.css';
+@import './components/treeselect.css';
+@import './components/cascader.css';
+@import './components/calendar.css';
+@import './components/list.css';
+@import './components/transfer.css';
+@import './components/menu.css';
+@import './components/context-menu.css';
+@import './components/collapse.css';
+@import './components/colorpicker.css';
+@import './components/empty.css';
+@import './components/result.css';
+@import './components/skeleton.css';
+@import './components/segmented.css';
+@import './components/steps.css';
+@import './components/timeline.css';
+@import './components/carousel.css';
+@import './components/descriptions.css';
+@import './components/mentions.css';
+@import './components/input-password.css';
+@import './components/search-input.css';
+@import './components/tag-input.css';
+@import './components/pin-input.css';
+@import './components/inline-edit.css';
+@import './components/input-group.css';
+@import './components/diagram.css';
+@import './components/charts.css';
+@import './components/dashboard.css';
+@import './components/gantt.css';
+@import './components/resource-calendar.css';
+@import './components/event-timeline.css';
+@import './components/schema-form-editor.css';
+@import './transitions.css';
+@import './print.css';

package/index.d.ts

@@ -1,9 +1,9 @@
-// `@skygraph/styles` is a CSS-only package — every entrypoint is a stylesheet
-// and is consumed via side-effect import (`import '@skygraph/styles'` /
-// `import '@skygraph/styles/components/button'`). This declaration file exists
-// solely so TypeScript with `moduleResolution: bundler` can resolve a typed
-// "module" for those side-effect imports.
-//
-// There is no JS / TS API to type — the package contributes only style rules.
-
-export {}
+// `@skygraph/styles` is a CSS-only package — every entrypoint is a stylesheet
+// and is consumed via side-effect import (`import '@skygraph/styles'` /
+// `import '@skygraph/styles/components/button'`). This declaration file exists
+// solely so TypeScript with `moduleResolution: bundler` can resolve a typed
+// "module" for those side-effect imports.
+//
+// There is no JS / TS API to type — the package contributes only style rules.
+
+export {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skygraph/styles",
-  "version": "0.6.4",
+  "version": "0.6.6",
   "description": "SkyGraph framework-agnostic CSS — tokens, themes, transitions, print and 60+ component stylesheets",
   "license": "MIT",
   "type": "module",

package/print.css

@@ -1,88 +1,88 @@
-/* SkyGraph — общие правила для @media print.
- *
- * Подключается из styles/index.css. Все переопределения сидят строго внутри
- * @media print, поэтому экранный рендеринг не затронут. `!important`
- * сознательно используется ради побеждания inline-стилей (которые JS-код
- * применяет на скрол-контейнерах, тенях, transform-ах для пана/зума) — это
- * стандартный print-CSS паттерн и разрешён в check-no-important media-allowlist.
- *
- * Дополнительные компонент-специфичные блоки (например `.sg-table-toolbar`,
- * `.sg-table-pagination`) живут рядом со своим компонентом
- * (см. components/table.css). Этот файл — общий слой.
- */
-
-@media print {
-  /* Универсальная маркировка "не печатать" — ставится JS-кодом на тулбары,
-   * fab-кнопки, hover-overlay и т.п. */
-  .sg-no-print {
-    display: none !important;
-  }
-
-  /* Принудительный page-break после блока. Используется data-атрибутом
-   * вместо класса, чтобы не конфликтовать с пользовательскими CSS-классами. */
-  [data-sg-page-break] {
-    page-break-after: always;
-    break-after: page;
-  }
-
-  [data-sg-page-break-before] {
-    page-break-before: always;
-    break-before: page;
-  }
-
-  /* Корневая обёртка popup-окна — добавляется printElement(). Ничего
-   * лишнего, только сброс отступов и прозрачный фон под печать. */
-  .sg-print-root {
-    background: #fff;
-    color: #000;
-  }
-
-  /* На случай корпоративных принтеров: убрать тяжёлые тени и transform —
-   * современные браузеры в большинстве случаев игнорируют CSS-анимации в
-   * print-mode, но `transform` (используется панами / зумами Diagram-а)
-   * сохраняется и ломает раскладку, если не сбросить. */
-  .sg-print-root [class*="sg-"][style*="transform"] {
-    /* Сбрасывается JS-side в Diagram через специальный data-атрибут
-     * (см. ниже), чтобы пан/зум не уезжал в печать. */
-  }
-
-  /* Раскрыть скролл-контейнеры — иначе печатается только видимое окно. */
-  .sg-table-wrapper,
-  .sg-table-scroll,
-  .sg-diagram,
-  .sg-chart-wrapper {
-    overflow: visible !important;
-    max-height: none !important;
-    height: auto !important;
-  }
-
-  /* Diagram: при печати сбрасываем pan/zoom transform на canvas-обёртке.
-   * Координата `data-pan-*` остаётся атрибутом — это диагностика, не CSS. */
-  .sg-diagram-canvas {
-    transform: none !important;
-  }
-
-  /* Таблица — каждую строку держим вместе. */
-  .sg-table-row,
-  .sg-table-tr,
-  .sg-datagrid-row {
-    page-break-inside: avoid;
-    break-inside: avoid;
-  }
-
-  /* Charts — скрыть hover crosshair и brushing, если они оказались
-   * закрашены на момент печати (selection rect остаётся в DOM). */
-  .sg-chart-crosshair,
-  .sg-chart-brush-overlay {
-    display: none !important;
-  }
-
-  /* Diagram — спрятать тулбары / минимапы. Стандартного minimap-классa у
-   * SkyGraph пока нет, но префикс зарезервирован — пусть пользователь
-   * добавит `.sg-no-print` или дочерний класс из этого списка. */
-  .sg-diagram-toolbar,
-  .sg-diagram-minimap,
-  .sg-diagram-controls {
-    display: none !important;
-  }
-}
+/* SkyGraph — общие правила для @media print.
+ *
+ * Подключается из styles/index.css. Все переопределения сидят строго внутри
+ * @media print, поэтому экранный рендеринг не затронут. `!important`
+ * сознательно используется ради побеждания inline-стилей (которые JS-код
+ * применяет на скрол-контейнерах, тенях, transform-ах для пана/зума) — это
+ * стандартный print-CSS паттерн и разрешён в check-no-important media-allowlist.
+ *
+ * Дополнительные компонент-специфичные блоки (например `.sg-table-toolbar`,
+ * `.sg-table-pagination`) живут рядом со своим компонентом
+ * (см. components/table.css). Этот файл — общий слой.
+ */
+
+@media print {
+  /* Универсальная маркировка "не печатать" — ставится JS-кодом на тулбары,
+   * fab-кнопки, hover-overlay и т.п. */
+  .sg-no-print {
+    display: none !important;
+  }
+
+  /* Принудительный page-break после блока. Используется data-атрибутом
+   * вместо класса, чтобы не конфликтовать с пользовательскими CSS-классами. */
+  [data-sg-page-break] {
+    page-break-after: always;
+    break-after: page;
+  }
+
+  [data-sg-page-break-before] {
+    page-break-before: always;
+    break-before: page;
+  }
+
+  /* Корневая обёртка popup-окна — добавляется printElement(). Ничего
+   * лишнего, только сброс отступов и прозрачный фон под печать. */
+  .sg-print-root {
+    background: #fff;
+    color: #000;
+  }
+
+  /* На случай корпоративных принтеров: убрать тяжёлые тени и transform —
+   * современные браузеры в большинстве случаев игнорируют CSS-анимации в
+   * print-mode, но `transform` (используется панами / зумами Diagram-а)
+   * сохраняется и ломает раскладку, если не сбросить. */
+  .sg-print-root [class*="sg-"][style*="transform"] {
+    /* Сбрасывается JS-side в Diagram через специальный data-атрибут
+     * (см. ниже), чтобы пан/зум не уезжал в печать. */
+  }
+
+  /* Раскрыть скролл-контейнеры — иначе печатается только видимое окно. */
+  .sg-table-wrapper,
+  .sg-table-scroll,
+  .sg-diagram,
+  .sg-chart-wrapper {
+    overflow: visible !important;
+    max-height: none !important;
+    height: auto !important;
+  }
+
+  /* Diagram: при печати сбрасываем pan/zoom transform на canvas-обёртке.
+   * Координата `data-pan-*` остаётся атрибутом — это диагностика, не CSS. */
+  .sg-diagram-canvas {
+    transform: none !important;
+  }
+
+  /* Таблица — каждую строку держим вместе. */
+  .sg-table-row,
+  .sg-table-tr,
+  .sg-datagrid-row {
+    page-break-inside: avoid;
+    break-inside: avoid;
+  }
+
+  /* Charts — скрыть hover crosshair и brushing, если они оказались
+   * закрашены на момент печати (selection rect остаётся в DOM). */
+  .sg-chart-crosshair,
+  .sg-chart-brush-overlay {
+    display: none !important;
+  }
+
+  /* Diagram — спрятать тулбары / минимапы. Стандартного minimap-классa у
+   * SkyGraph пока нет, но префикс зарезервирован — пусть пользователь
+   * добавит `.sg-no-print` или дочерний класс из этого списка. */
+  .sg-diagram-toolbar,
+  .sg-diagram-minimap,
+  .sg-diagram-controls {
+    display: none !important;
+  }
+}

package/reset.css

@@ -1,17 +1,17 @@
-/* SkyGraph reset — all sg-* scoped elements */
-
-[class^="sg-"],
-[class*=" sg-"],
-[class^="sg-"] *,
-[class*=" sg-"] *,
-[class^="sg-"] *::before,
-[class*=" sg-"] *::before,
-[class^="sg-"] *::after,
-[class*=" sg-"] *::after {
-  box-sizing: border-box;
-}
-
-[class^="sg-"] button,
-[class*=" sg-"] button {
-  font-family: inherit;
-}
+/* SkyGraph reset — all sg-* scoped elements */
+
+[class^="sg-"],
+[class*=" sg-"],
+[class^="sg-"] *,
+[class*=" sg-"] *,
+[class^="sg-"] *::before,
+[class*=" sg-"] *::before,
+[class^="sg-"] *::after,
+[class*=" sg-"] *::after {
+  box-sizing: border-box;
+}
+
+[class^="sg-"] button,
+[class*=" sg-"] button {
+  font-family: inherit;
+}

package/themes/dark.css

@@ -1,17 +1,17 @@
-/* SkyGraph -- Dark theme
- *
- * Convenience re-export of the full token set. Activate dark mode by setting
- * `data-sg-theme="dark"` on `<html>` (or any wrapper). The dark semantic
- * tokens kick in via the `[data-sg-theme="dark"]` selector inside `tokens.css`.
- *
- * NOTE: this file imports the SAME `tokens.css` as `default.css`. Both light
- * and dark semantic tokens live there; importing only `dark.css` does NOT
- * give you a "dark-only" stylesheet — the selector decides which set wins.
- *
- * Example:
- *   import '@skygraph/styles/themes/dark'
- *
- *   <html data-sg-theme="dark"> ... </html>
- */
-
-@import '../tokens.css';
+/* SkyGraph -- Dark theme
+ *
+ * Convenience re-export of the full token set. Activate dark mode by setting
+ * `data-sg-theme="dark"` on `<html>` (or any wrapper). The dark semantic
+ * tokens kick in via the `[data-sg-theme="dark"]` selector inside `tokens.css`.
+ *
+ * NOTE: this file imports the SAME `tokens.css` as `default.css`. Both light
+ * and dark semantic tokens live there; importing only `dark.css` does NOT
+ * give you a "dark-only" stylesheet — the selector decides which set wins.
+ *
+ * Example:
+ *   import '@skygraph/styles/themes/dark'
+ *
+ *   <html data-sg-theme="dark"> ... </html>
+ */
+
+@import '../tokens.css';

package/themes/default.css

@@ -1,14 +1,14 @@
-/* SkyGraph -- Light theme (default)
- *
- * Convenience re-export of the full token set. After importing this file the
- * `[data-sg-theme="light"]` selector inside `tokens.css` is the active layer.
- *
- * NOTE: this file imports the SAME `tokens.css` as `dark.css`. Both light and
- * dark semantic tokens live there; the active set is decided at runtime via
- * the `data-sg-theme` attribute on a parent element.
- *
- * Import:
- *   import '@skygraph/styles/themes/default'
- */
-
-@import '../tokens.css';
+/* SkyGraph -- Light theme (default)
+ *
+ * Convenience re-export of the full token set. After importing this file the
+ * `[data-sg-theme="light"]` selector inside `tokens.css` is the active layer.
+ *
+ * NOTE: this file imports the SAME `tokens.css` as `dark.css`. Both light and
+ * dark semantic tokens live there; the active set is decided at runtime via
+ * the `data-sg-theme` attribute on a parent element.
+ *
+ * Import:
+ *   import '@skygraph/styles/themes/default'
+ */
+
+@import '../tokens.css';